/* =============================================================================
   Zet AI page (/{culture}/zet-ai) — Zeetius public website
   -----------------------------------------------------------------------------
   Sits on top of marketplace.css (tokens --mk-*, .zt-mascot, .zt-bubble) and the
   marketplace layout. The page's visual vocabulary is the copilot's own chat UI:
   bubbles, chips and data stamps, so every section reads as the product.
   Mobile-first; logical properties so Arabic mirrors.
   ========================================================================== */

:root {
    --za-navy: #303C6F;
    --za-navy-deep: #202a52;
    --za-orange: #EB5B2B;
    --za-peach: #ffb38a;
    --za-ink: #0e1514;
    --za-body: #33394a;
    --za-surface: #f8f9fb;
    --za-line: #e4e7ef;
    --za-ease: cubic-bezier(.22, .9, .3, 1);
    --za-z-peek: 2;
}

.za-section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.za-section--tint { background: var(--za-surface); border-block: 1px solid var(--za-line); }
.za-section--navy { background: linear-gradient(160deg, var(--za-navy) 0%, var(--za-navy-deep) 100%); color: #fff; }
.za-section__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.za-section__head--mascot { max-inline-size: none; display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 62rem) { .za-section__head--mascot { grid-template-columns: minmax(0, 46rem) auto; justify-content: space-between; } }

.za-h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .75rem; color: var(--za-navy); text-wrap: balance; }
.za-section--navy .za-h2 { color: #fff; }
.za-h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; color: var(--za-navy); display: flex; align-items: center; gap: .55rem; }
.za-h3 i { color: var(--za-orange); font-size: 1rem; }
.za-lead { font-size: 1.08rem; line-height: 1.6; color: var(--za-body); margin: 0; max-inline-size: 60ch; text-wrap: pretty; }
.za-section--navy .za-lead { color: rgba(255, 255, 255, .84); line-height: 1.68; }

/* ---------------------------------------------------------------- shared atoms */
.za-kicker { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; background: var(--za-navy); color: #fff; font-size: .82rem; font-weight: 600; }
.za-kicker i { color: var(--za-peach); }

.za-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }
.za-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 3rem; padding: .7rem 1.4rem; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background .2s var(--za-ease), color .2s var(--za-ease), transform .2s var(--za-ease); }
.za-btn--primary { background: var(--za-orange); color: #fff; border: 1px solid var(--za-orange); }
.za-btn--primary:hover, .za-btn--primary:focus-visible { background: #e83c02; color: #fff; }
.za-btn--ghost { background: transparent; color: var(--za-navy); border: 1px solid var(--za-navy); }
.za-btn--ghost:hover, .za-btn--ghost:focus-visible { background: var(--za-navy); color: #fff; }
.za-section--navy .za-btn--ghost, .za-cta .za-btn--ghost { border-color: currentColor; }
.za-btn:focus-visible { outline: 3px solid rgba(235, 91, 43, .5); outline-offset: 2px; }

.za-avatar { display: inline-grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; background: #fff; border: 1px solid var(--za-line); flex: none; overflow: hidden; }
.za-avatar .zt-mascot-head { inline-size: 2.05rem; block-size: auto; display: block; }
.za-avatar--lg { inline-size: 2.75rem; block-size: 2.75rem; }
.za-avatar--lg .zt-mascot-head { inline-size: 2.7rem; }

.za-stamp { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--za-orange); }
.za-stamp--block { margin-block-start: 1rem; }

.za-chips { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.za-chips li { padding: .5rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--za-line); color: var(--za-navy); font-size: .92rem; font-weight: 600; }

/* ---------------------------------------------------------------- chat vocabulary */
.za-msg { display: grid; gap: .35rem; max-inline-size: 34rem; }
.za-msg--user { justify-self: end; justify-items: end; }
.za-msg--bot { grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.za-msg__who { font-size: .72rem; font-weight: 700; color: #7a8199; }
.za-msg__text { margin: 0; padding: .8rem 1rem; border-radius: 16px; font-size: .98rem; line-height: 1.5; }
.za-msg--user .za-msg__text { background: var(--za-navy); color: #fff; border-end-end-radius: 4px; }
.za-msg--bot .za-msg__text { background: var(--za-surface); color: var(--za-ink); border: 1px solid var(--za-line); border-start-start-radius: 4px; }
.za-msg__body { display: grid; gap: .4rem; }
.za-msg--bot .za-stamp { padding-inline-start: .25rem; }

/* ---------------------------------------------------------------- hero */
.za-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5.5rem); background: radial-gradient(44rem 26rem at 8% -10%, rgba(235, 91, 43, .16), transparent 60%), radial-gradient(40rem 24rem at 100% 0%, rgba(48, 60, 111, .14), transparent 60%), var(--za-surface); border-block-end: 1px solid var(--za-line); }
.za-hero__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .za-hero__inner { grid-template-columns: 1fr 1.3fr; gap: 3rem; } }
.za-hero__title { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; margin: 1rem 0 1rem; color: var(--za-navy); text-wrap: balance; }
.za-hero__sub { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--za-body); margin: 0; max-inline-size: 36rem; text-wrap: pretty; }

/* The hero artwork is the full aico-pilot scene — figure, greeting bubble and feature chips —
   so it takes the whole column width to stay readable. */
.za-hero__art { inline-size: 100%; }
.za-hero__art .zt-mascot { display: block; inline-size: 100%; block-size: auto; max-inline-size: none; margin-inline: auto; }

/* The worked example is a section of its own: the pitch centred above the conversation it
   describes, so the panel reads as the subject rather than as an aside. */
.za-example__grid { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); justify-items: center; }
.za-example__grid .za-section__head { margin-block-end: 0; text-align: center; }
.za-example__grid .za-lead { margin-inline: auto; }
.za-demo { position: relative; inline-size: 100%; max-inline-size: 46rem; }

.za-panel { position: relative; background: #fff; border: 1px solid var(--za-line); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(48, 60, 111, .45), 0 2px 8px rgba(48, 60, 111, .06); overflow: hidden; }
.za-panel__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; background: linear-gradient(135deg, var(--za-navy), #4b5aa3); color: #fff; }
.za-panel__id { display: grid; line-height: 1.25; flex: 1; min-inline-size: 0; }
.za-panel__id strong { font-size: 1rem; }
.za-panel__id span { font-size: .76rem; color: rgba(255, 255, 255, .8); display: inline-flex; align-items: center; gap: .4rem; }
.za-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.za-replay { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--za-ease); }
.za-replay:hover, .za-replay:focus-visible { background: rgba(255, 255, 255, .22); }
.za-replay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.za-roles { display: grid; gap: .5rem; padding: .85rem 1.1rem; border-block-end: 1px solid var(--za-line); background: var(--za-surface); }
.za-roles__label { font-size: .78rem; font-weight: 700; color: #5b6275; }
.za-roles__seg { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: #fff; border: 1px solid var(--za-line); inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; }
.za-roles__btn { flex: none; border: 0; background: transparent; padding: .45rem .9rem; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--za-navy); cursor: pointer; transition: background .2s var(--za-ease), color .2s var(--za-ease); white-space: nowrap; }
.za-roles__btn[aria-checked="true"] { background: var(--za-navy); color: #fff; }
.za-roles__btn:focus-visible { outline: 2px solid var(--za-orange); outline-offset: 1px; }
@media (min-width: 40rem) { .za-roles { grid-template-columns: auto 1fr; align-items: center; } }

.za-thread { display: grid; gap: 1rem; padding: 1.25rem 1.1rem; min-block-size: 15rem; align-content: start; }
.za-thread .za-msg__text { transition: opacity .25s var(--za-ease); }
.za-msg--bot.is-thinking .za-msg__text { color: #7a8199; font-style: italic; }
.za-msg--bot.is-thinking .za-stamp { visibility: hidden; }
.za-msg.is-hidden { visibility: hidden; }
.za-caret::after { content: ""; display: inline-block; inline-size: 2px; block-size: 1em; margin-inline-start: 2px; vertical-align: -.15em; background: currentColor; animation: za-blink .8s steps(2) infinite; }
@keyframes za-blink { to { opacity: 0; } }

.za-suggest { display: flex; gap: .5rem; padding: 0 1.1rem .75rem; overflow-x: auto; scrollbar-width: none; }
.za-suggest::-webkit-scrollbar { display: none; }
.za-suggest span { flex: none; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--za-line); background: #fff; color: var(--za-navy); font-size: .84rem; font-weight: 600; }
.za-composer { display: flex; align-items: center; gap: .6rem; margin: 0 1.1rem 1.1rem; padding: .35rem .35rem .35rem 1rem; border-radius: 999px; border: 1px solid var(--za-line); background: var(--za-surface); }
.za-composer__input { flex: 1; font-size: .92rem; color: #7a8199; }
.za-composer__send { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--za-orange); color: #fff; display: grid; place-items: center; font-size: .85rem; }

/* ---------------------------------------------------------------- two kinds */
.za-two { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .za-two { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.za-two__col { padding: 1.75rem; border-radius: 22px; border: 1px solid var(--za-line); background: #fff; }
.za-two__col p { color: var(--za-body); line-height: 1.6; margin: 0; }
.za-two__col--data { background: linear-gradient(180deg, #fff, var(--za-surface)); }
.za-two__col--help .za-h3 i { color: var(--za-navy); }
.za-two__col--help .za-stamp { color: var(--za-navy); }

/* ---------------------------------------------------------------- modules */
.za-peek { position: relative; inline-size: 5.5rem; justify-self: end; }
.za-peek .zt-mascot-head { inline-size: 100%; block-size: auto; display: block; }
.za-peek__bubble { inset-inline-start: auto; inset-inline-end: 5.75rem; inset-block-start: .25rem; inline-size: max-content; max-inline-size: 11rem; animation: none; opacity: 1; border-radius: 14px 14px 4px 14px; }
.za-peek__bubble::after { inset-inline-start: auto; inset-inline-end: -.4rem; border-inline-end-color: transparent; border-inline-start-color: #fff; }

.za-modules { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .za-modules { grid-template-columns: 17rem 1fr; gap: 2rem; align-items: start; } }
.za-modules__rail { display: flex; gap: .5rem; overflow-x: auto; padding-block-end: .5rem; scrollbar-width: thin; }
@media (min-width: 62rem) { .za-modules__rail { flex-direction: column; overflow: visible; padding: .5rem; border-radius: 18px; background: #fff; border: 1px solid var(--za-line); } }
.za-tab { flex: none; display: inline-flex; align-items: center; gap: .6rem; padding: .65rem .95rem; border-radius: 12px; border: 1px solid var(--za-line); background: #fff; color: var(--za-navy); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-align: start; transition: background .2s var(--za-ease), color .2s var(--za-ease), border-color .2s var(--za-ease); }
.za-tab i { inline-size: 1.1rem; text-align: center; color: var(--za-orange); }
.za-tab:hover { border-color: var(--za-navy); }
.za-tab[aria-selected="true"] { background: var(--za-navy); color: #fff; border-color: var(--za-navy); }
.za-tab[aria-selected="true"] i { color: var(--za-peach); }
.za-tab:focus-visible { outline: 2px solid var(--za-orange); outline-offset: 2px; }
@media (min-width: 62rem) { .za-tab { border-color: transparent; } }
.za-modules__stage { padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--za-line); min-block-size: 14rem; }
@media (min-width: 62rem) { .za-modules__stage { position: sticky; inset-block-start: 6rem; } }
.za-exchange { display: grid; gap: 1rem; animation: za-in .35s var(--za-ease); }
@keyframes za-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- roles table */
.za-table-wrap { overflow-x: auto; border: 1px solid var(--za-line); border-radius: 18px; background: #fff; }
.za-table { inline-size: 100%; min-inline-size: 42rem; border-collapse: collapse; font-size: .95rem; }
.za-table th, .za-table td { padding: .9rem 1rem; text-align: start; border-block-end: 1px solid var(--za-line); vertical-align: middle; }
.za-table thead th { font-size: .8rem; font-weight: 700; color: #5b6275; background: var(--za-surface); }
.za-table tbody th { font-weight: 700; color: var(--za-navy); white-space: nowrap; }
.za-table tbody tr:last-child th, .za-table tbody tr:last-child td { border-block-end: 0; }
.za-table td[data-v] { font-weight: 600; }
.za-table td[data-v="y"] { color: #15803d; }
.za-table td[data-v="n"] { color: #b03a2e; }
.za-table td[data-v="o"] { color: var(--za-navy); }
.za-table td[data-v]::before { content: ""; display: inline-block; inline-size: .55rem; block-size: .55rem; border-radius: 50%; margin-inline-end: .5rem; background: currentColor; }

/* ---------------------------------------------------------------- trust steps */
.za-shield { position: relative; inline-size: 6.5rem; block-size: 6.5rem; display: grid; place-items: center; justify-self: end; }
.za-shield > i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6.5rem; color: rgba(255, 255, 255, .12); }
.za-shield .zt-mascot-head { position: relative; inline-size: 4rem; block-size: auto; }
.za-shield__bubble { inset-inline-start: auto; inset-inline-end: 6.5rem; inset-block-start: .5rem; inline-size: max-content; max-inline-size: 12rem; animation: none; opacity: 1; border-radius: 14px 14px 4px 14px; }
.za-shield__bubble::after { inset-inline-start: auto; inset-inline-end: -.4rem; border-inline-end-color: transparent; border-inline-start-color: #fff; }

.za-compliance { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .za-compliance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .za-compliance { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.za-compliance__item { display: grid; gap: .85rem; padding: 1.4rem 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.za-compliance__flag { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px; background: var(--za-orange); color: #fff; font-size: .9rem; font-weight: 800; letter-spacing: .04em; }
.za-compliance__item h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.za-compliance__item p { margin: 0; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.za-steps__title { font-size: 1.2rem; font-weight: 700; margin: 2.5rem 0 1rem; color: #fff; }
.za-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .za-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .za-steps { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.za-step { padding: 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.za-step__n { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; background: var(--za-orange); color: #fff; font-size: 1rem; margin-block-end: .85rem; }
.za-step__t { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; color: #fff; }
.za-step__d { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.za-steps.is-live .za-step { animation: za-step-in .6s var(--za-ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes za-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.za-trust__note { margin: 1.5rem 0 0; display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: rgba(255, 255, 255, .88); }
.za-trust__note i { color: var(--za-peach); margin-block-start: .2rem; }

/* ---------------------------------------------------------------- other AI features */
.za-also { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--za-line); }
.za-also__row { display: grid; gap: .75rem 1.25rem; padding: 1.5rem 0; border-block-end: 1px solid var(--za-line); align-items: start; }
@media (min-width: 56rem) { .za-also__row { grid-template-columns: 3.25rem 1fr auto; align-items: center; } }
.za-also__icon { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 14px; background: var(--za-surface); border: 1px solid var(--za-line); color: var(--za-orange); font-size: 1.2rem; }
.za-also__row p { margin: 0; color: var(--za-body); line-height: 1.6; max-inline-size: 60ch; }
.za-where { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--za-line); color: var(--za-navy); font-size: .84rem; font-weight: 600; white-space: nowrap; inline-size: fit-content; }
.za-where i { color: var(--za-orange); font-size: .75rem; }

/* ---------------------------------------------------------------- languages */
.za-langs { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.za-langs__item { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--za-line); }
.za-langs__item.is-current { border-color: var(--za-orange); box-shadow: 0 0 0 3px rgba(235, 91, 43, .12); }
.za-langs__name { font-size: .76rem; font-weight: 700; color: #5b6275; }
.za-langs__q { font-size: 1rem; font-weight: 600; color: var(--za-navy); }

/* ---------------------------------------------------------------- faq */
.za-faq { max-inline-size: 46rem; }
.za-faq .za-h2 { margin-block-end: 1.5rem; }
.za-faq__item { border-block-start: 1px solid var(--za-line); padding: .25rem 0; }
.za-faq__item:last-of-type { border-block-end: 1px solid var(--za-line); }
.za-faq__item summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 700; font-size: 1.05rem; color: var(--za-navy); list-style: none; position: relative; }
[dir="rtl"] .za-faq__item summary { padding: 1rem 0 1rem 2rem; }
.za-faq__item summary::-webkit-details-marker { display: none; }
.za-faq__item summary::after { content: "+"; position: absolute; inset-inline-end: .25rem; inset-block-start: .85rem; font-size: 1.4rem; line-height: 1; color: var(--za-orange); transition: transform .25s var(--za-ease); }
.za-faq__item[open] summary::after { transform: rotate(45deg); }
.za-faq__item summary:focus-visible { outline: 2px solid var(--za-orange); outline-offset: 2px; border-radius: 6px; }
.za-faq__item p { margin: 0 0 1rem; color: var(--za-body); line-height: 1.65; max-inline-size: 65ch; }

/* ---------------------------------------------------------------- closing call */
.za-cta { background: linear-gradient(135deg, var(--za-navy) 0%, #3d4e7c 60%, #4b5aa3 100%); color: #fff; position: relative; overflow: hidden; }
.za-cta::before { content: ""; position: absolute; inset: -40% auto auto -10%; inline-size: 28rem; block-size: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(235, 91, 43, .45), transparent 65%); pointer-events: none; }
.za-cta__inner { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .za-cta__inner { grid-template-columns: auto 1fr; gap: 3.5rem; } }
.za-cta__mascot { position: relative; inline-size: min(100%, 11rem); justify-self: center; }
.za-cta__mascot .zt-mascot { inline-size: 100%; max-inline-size: none; filter: drop-shadow(0 0 26px rgba(255, 255, 255, .22)) drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); }
.za-cta__mascot { margin-block-start: 2.5rem; }
.za-cta__bubble { inset-inline-start: 45%; inset-inline-end: auto; inset-block-start: -2.75rem; inline-size: max-content; max-inline-size: 11rem; border-radius: 14px 14px 14px 4px; }
.za-cta__bubble::after { inset-inline-start: .6rem; inset-block-end: -.85rem; border: .45rem solid transparent; border-block-start-color: #fff; border-inline-end-color: transparent; }
.za-cta .za-h2 { color: #fff; }
.za-cta .za-lead { color: rgba(255, 255, 255, .86); }
.za-cta .za-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.za-cta .za-btn--ghost:hover, .za-cta .za-btn--ghost:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------------------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
    .za-caret::after { animation: none; }
    .za-exchange, .za-steps.is-live .za-step { animation: none; }
    .za-btn, .za-tab, .za-roles__btn, .za-replay { transition: none; }
}