/* -------------------------------------------------------------------------
 * Aize components
 *
 * Loaded after style.css. Holds the components introduced by the Iran GTM
 * rebuild, plus the responsive rules the theme was missing entirely (style.css
 * contained no media queries at all, so every layout was desktop-only).
 *
 * The site is Persian-only and always RTL. Logical properties
 * (inline-start/end, margin-inline) are still used so the rules read naturally
 * in an RTL context.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Base corrections
 * ---------------------------------------------------------------------- */

/*
 * Type scale.
 *
 * style.css was sized for a sparse editorial hero (h1 up to 5.6rem capped at
 * 11ch). That fights the denser Persian marketing copy here: headings ran to
 * four lines and pushed the CTAs below the fold. These are tuned for reading,
 * not for the poster effect.
 */
h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.9rem);
    max-width: 17ch;
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.7rem, 2.9vw, 2.7rem);
    line-height: 1.18;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--aize-paper-strong);
    border-radius: var(--aize-radius-sm);
    box-shadow: var(--aize-shadow-soft);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    margin: 0;
    overflow: visible;
    white-space: normal;
}

:focus-visible {
    outline: 3px solid var(--aize-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.site-main {
    padding-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Trust seals
 * ---------------------------------------------------------------------- */

.enamad-seal {
    display: flex;
    justify-content: center;
    margin-block-start: 1.5rem;
}

.enamad-seal a {
    display: inline-flex;
    padding: 0.55rem;
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-sm);
    background: #fff;
    box-shadow: var(--aize-shadow-soft);
}

.enamad-seal img {
    display: block;
    width: 8rem;
    height: auto;
}

/* -------------------------------------------------------------------------
 * Header navigation
 * ---------------------------------------------------------------------- */

.header-shell {
    min-height: 4rem;
    padding-block: 0.45rem;
}

.site-mark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-branding {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-logo {
    width: 10rem;
    height: auto;
}

.footer-mark .site-logo {
    width: 8.5rem;
}

.footer-mark {
    width: fit-content;
    padding: 0.45rem 0.65rem;
    border-radius: var(--aize-radius-sm);
    background: #ffffff;
}

.site-mark-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--aize-teal), var(--aize-coral));
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
}

.site-mark-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.site-mark .site-title {
    font-size: 1.6rem;
}

.site-description {
    font-size: 0.78rem;
    color: var(--aize-ink-soft);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.primary-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}

.primary-menu > li {
    position: relative;
}

.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--aize-radius-sm);
    background: transparent;
    color: var(--aize-ink);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.menu-link:hover,
.menu-link:focus-visible,
.has-dropdown.is-open > .menu-link {
    background: rgba(14, 165, 233, 0.08);
    color: var(--aize-teal-deep);
}

/*
 * A down-chevron drawn with physical borders, not logical ones: logical
 * borders flip in RTL and the open-state rotation stopped reading as "open".
 */
.dropdown-caret {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.2s ease;
}

.has-dropdown.is-open .dropdown-caret {
    transform: rotate(225deg) translate(-1px, -1px);
}

/*
 * The panel sits 0.6rem below the trigger, and that gap belongs to no element.
 *
 * navigation.js closes on the li's `mouseleave` with no grace period, so a pointer travelling
 * from the button down into the panel leaves the li while crossing the gap and the menu shuts.
 * Whether it shuts depends on how fast you move: a quick diagonal can skip the gap between two
 * mousemove events and survive, a slow straight one does not — which is why it looked
 * intermittent and had no reproducible steps.
 *
 * ::before bridges the gap so it is part of the panel's own box. Fixing it here rather than with
 * a close-delay timer keeps the behaviour deterministic: no menu that lingers after you have
 * genuinely left it.
 */
.dropdown-panel::before {
    content: "";
    position: absolute;
    /*
     * Taller than the 0.6rem gap, on purpose.
     *
     * An absolutely positioned pseudo-element is placed against its parent's PADDING box, and the
     * panel has both a border and 0.6rem of padding — so `top: -0.6rem` landed about a pixel
     * BELOW the real gap and left a sliver the pointer could still fall through. Instrumenting
     * the li's mouseleave showed it firing with relatedTarget NAV.main-navigation, which is what
     * a one-pixel dead zone looks like.
     *
     * 0.75rem overlaps the trigger's bottom edge slightly rather than leaving any gap at all.
     */
    top: -0.75rem;
    inset-inline: 0;
    height: 0.75rem;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    inset-inline-start: 0;
    z-index: 80;
    min-width: 21rem;
    padding: 0.6rem;
    background: var(--aize-paper-strong);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-lg);
    box-shadow: var(--aize-shadow);
}

.dropdown-panel[hidden] {
    display: none;
}

.dropdown-panel ul {
    list-style: none;
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
}

.dropdown-panel a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--aize-radius-sm);
    text-decoration: none;
    transition: background 0.16s ease;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
    background: rgba(14, 165, 233, 0.07);
}

.dropdown-panel strong {
    display: block;
    font-size: 0.95rem;
    color: var(--aize-ink);
}

.dropdown-panel span {
    display: block;
    font-size: 0.82rem;
    color: var(--aize-ink-soft);
    line-height: 1.5;
}

.header-link {
    text-decoration: none;
    font-size: 0.95rem;
}

.header-actions .cta-button {
    padding: 0.72rem 1.25rem;
    font-size: 0.95rem;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-sm);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: var(--aize-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle-bars {
    position: relative;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.menu-toggle-bars::before {
    top: -6px;
}

.menu-toggle-bars::after {
    top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars {
    background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * Section scaffolding
 * ---------------------------------------------------------------------- */

.section-shell {
    margin-top: 0;
    padding-block: 3.5rem;
}

.section-shell:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.34);
}

.section-head {
    max-width: 62ch;
    margin-bottom: 2rem;
}

.section-head h2 {
    margin-bottom: 0.75rem;
}

.section-lead,
.section-head .section-lead {
    max-width: 68ch;
    font-size: 1.05rem;
    color: var(--aize-ink-soft);
}

.section-footer-link {
    margin-top: 1.75rem;
}

.narrow-block {
    max-width: 68ch;
}

.page-hero {
    padding-block: 4rem 2.5rem;
}

.page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(16rem, 0.88fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: center;
}

.page-hero-copy {
    min-width: 0;
}

.hero-visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.hero-visual img {
    display: block;
    width: min(100%, 32rem);
    height: auto;
    max-height: 27rem;
    object-fit: contain;
}

.page-hero.compact {
    padding-block: 3rem 2rem;
}

.page-hero h1 {
    max-width: 18ch;
}

.hero-note,
.fine-print {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: var(--aize-ink-soft);
}

.callout {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-inline-start: 4px solid var(--aize-coral);
    border-radius: var(--aize-radius-sm);
    background: rgba(99, 102, 241, 0.07);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--aize-ink);
}

.split-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* -------------------------------------------------------------------------
 * Hero extras
 * ---------------------------------------------------------------------- */

.hero-copy {
    max-width: 60ch;
}

.hero-section .page-hero-inner {
    min-height: 31rem;
}

.hero-section .hero-visual img {
    width: min(100%, 38rem);
    max-height: 32rem;
}

.home-section-visual {
    display: grid;
    place-items: center;
    margin: clamp(1.5rem, 4vw, 3rem) auto;
}

.home-section-visual img {
    display: block;
    width: min(100%, 46rem);
    height: auto;
    max-height: 21rem;
    object-fit: contain;
}

.home-section-visual-wide img {
    width: min(100%, 52rem);
}

.home-section-visual-compact {
    margin-bottom: 0;
}

.home-section-visual-compact img {
    width: min(100%, 24rem);
    max-height: 16rem;
}

/* -------------------------------------------------------------------------
 * Search-led acquisition pages
 * ---------------------------------------------------------------------- */

.acquisition-answer-section {
    padding-block: 1rem 2rem;
}

.acquisition-answer {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-inline-start: 5px solid var(--aize-teal);
    border-radius: var(--aize-radius-lg);
    background: rgba(15, 118, 110, 0.07);
}

.acquisition-answer h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
}

.acquisition-answer p {
    margin: 0;
    color: var(--aize-ink-soft);
    font-size: 1.05rem;
}

.acquisition-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.acquisition-example > div {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-lg);
}

.acquisition-example-input {
    background: var(--aize-ink);
    color: var(--aize-paper-strong);
}

.acquisition-example-output {
    background: var(--aize-paper);
}

.acquisition-example > div > span {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aize-coral);
}

.acquisition-example blockquote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 2;
}

.acquisition-example-output .check-list {
    margin: 0;
}

.acquisition-comparison {
    background: rgba(255, 255, 255, 0.32);
}

.proof-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 2.25rem 0 0;
    padding: 0;
}

.proof-strip li {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--aize-ink-soft);
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.card-grid {
    display: grid;
    gap: 1.25rem;
}

.card-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aize-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem;
    background: var(--aize-paper);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-lg);
    box-shadow: var(--aize-shadow-soft);
}

.card-grid.compact .aize-card {
    padding: 1.25rem;
}

.aize-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.aize-card p {
    margin: 0;
    color: var(--aize-ink-soft);
    font-size: 0.95rem;
}

.aize-card .text-link {
    margin-top: auto;
    padding-top: 0.5rem;
    text-decoration: none;
}

.feature-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    background: rgba(15, 118, 110, 0.1);
    color: var(--aize-teal-deep);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.simple-list {
    margin: 0;
    padding-inline-start: 1.15rem;
    color: var(--aize-ink-soft);
    font-size: 0.95rem;
}

.simple-list li {
    margin-bottom: 0.4rem;
}

.simple-list.two-column {
    columns: 2;
    column-gap: 2rem;
}

.check-list {
    list-style: none;
    padding-inline-start: 0;
}

.check-list li {
    position: relative;
    padding-inline-start: 1.75rem;
    margin-bottom: 0.7rem;
}

.check-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.55rem;
    width: 0.75rem;
    height: 0.4rem;
    border-inline-start: 2px solid var(--aize-teal);
    border-block-end: 2px solid var(--aize-teal);
    transform: rotate(-45deg);
}

.numbered-list {
    margin: 0;
    padding-inline-start: 1.2rem;
    color: var(--aize-ink-soft);
}

.numbered-list li {
    margin-bottom: 0.65rem;
}

/* -------------------------------------------------------------------------
 * Step flow
 * ---------------------------------------------------------------------- */

.step-flow {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--aize-paper);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
}

.step-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aize-teal), var(--aize-coral));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.step-item > div {
    flex: 1 1 auto;
}

.step-item h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
}

.step-item p {
    margin: 0;
    font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
 * Pipeline
 * ---------------------------------------------------------------------- */

.pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.pipeline-stage {
    position: relative;
    padding: 0.7rem 1.15rem;
    background: var(--aize-paper-strong);
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.pipeline-stage:not(:last-child)::after {
    content: "→";
    margin-inline-start: 0.85rem;
    color: var(--aize-coral);
    font-weight: 700;
}

body.rtl .pipeline-stage:not(:last-child)::after {
    content: "←";
}

/* -------------------------------------------------------------------------
 * Compare panels and tables
 * ---------------------------------------------------------------------- */

.compare-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.compare-panel {
    padding: 1.75rem;
    background: var(--aize-paper);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-lg);
}

.compare-panel h2,
.compare-panel h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.compare-panel-before {
    background: rgba(223, 109, 87, 0.06);
    border-color: rgba(223, 109, 87, 0.2);
}

.compare-panel-after {
    background: rgba(15, 118, 110, 0.06);
    border-color: rgba(15, 118, 110, 0.22);
}

.table-scroll {
    overflow-x: auto;
    border-radius: var(--aize-radius-md);
    border: 1px solid var(--aize-line);
    background: var(--aize-paper-strong);
}

.compare-table,
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    min-width: 40rem;
}

.compare-table th,
.compare-table td,
.spec-table th,
.spec-table td {
    padding: 0.9rem 1.1rem;
    text-align: start;
    border-bottom: 1px solid var(--aize-line);
    vertical-align: top;
}

.compare-table thead th,
.spec-table thead th {
    background: rgba(15, 118, 110, 0.07);
    font-weight: 700;
    color: var(--aize-ink);
    white-space: nowrap;
}

.compare-table tbody th,
.spec-table tbody th {
    font-weight: 600;
    color: var(--aize-ink);
}

.compare-table tbody td,
.spec-table tbody td {
    color: var(--aize-ink-soft);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td,
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.compare-card h2 a {
    text-decoration: none;
    color: var(--aize-teal-deep);
}

.compare-card-meta,
.spec-list,
.agent-spec,
.doc-meta {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1rem;
}

.compare-card-meta dt,
.spec-list dt,
.agent-spec dt,
.doc-meta dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aize-teal-deep);
    margin-bottom: 0.2rem;
}

.compare-card-meta dd,
.spec-list dd,
.agent-spec dd,
.doc-meta dd {
    margin: 0;
    color: var(--aize-ink-soft);
    font-size: 0.95rem;
}

.spec-list,
.doc-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
}

.review-date {
    font-size: 0.88rem;
    color: var(--aize-ink-soft);
    margin-bottom: 1rem;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--aize-ink-soft);
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--aize-teal-deep);
}

.source-list {
    word-break: break-all;
}

/* -------------------------------------------------------------------------
 * Model catalog
 * ---------------------------------------------------------------------- */

.catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.catalog-freshness {
    font-size: 0.85rem;
    color: var(--aize-ink-soft);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.filter-chip {
    padding: 0.5rem 1rem;
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--aize-ink-soft);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.filter-chip:hover {
    border-color: rgba(15, 118, 110, 0.35);
}

.filter-chip.is-active {
    background: var(--aize-teal);
    border-color: var(--aize-teal);
    color: #fff;
}

.model-card[hidden] {
    display: none;
}

.model-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.model-headline h3 {
    margin: 0;
}

.model-provider {
    font-size: 0.85rem;
    color: var(--aize-ink-soft);
}

.model-cost {
    font-size: 0.88rem;
}

/* .tag lives on a light surface here; style.css styles it for the dark footer. */
.aize-card .tag,
.model-card .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(223, 139, 44, 0.14);
    border: 1px solid rgba(223, 139, 44, 0.25);
    color: #8a5312;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Pricing
 * ---------------------------------------------------------------------- */

.pricing-tabs {
    margin-block: 1rem 2rem;
}

.tablist {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--aize-line);
    border-radius: 999px;
}

.tab-button {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--aize-ink-soft);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.tab-button[aria-selected="true"] {
    background: var(--aize-teal);
    color: #fff;
}

.tabpanel[hidden] {
    display: none;
}

.pricing-card {
    position: relative;
}

.price-highlight {
    font-family: "Markazi Text", serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--aize-teal-deep);
    line-height: 1.2;
}

.price-period {
    font-family: "Vazirmatn", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--aize-ink-soft);
}

.price-pending {
    font-family: "Vazirmatn", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aize-ink-soft);
}

.pricing-preview-card.featured,
.aize-card.featured {
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: 0 20px 44px rgba(15, 118, 110, 0.14);
}

.team-plan {
    padding: 2rem;
    margin-bottom: 2.5rem;
    background: var(--aize-paper);
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: var(--aize-radius-xl);
    box-shadow: var(--aize-shadow-soft);
}

.team-plan-head {
    margin-bottom: 1.5rem;
}

.team-plan h3 {
    font-size: 1.5rem;
}

.team-plan h4 {
    margin: 1.75rem 0 0.85rem;
    font-size: 1.05rem;
}

.pending-notice {
    padding: 1.1rem 1.35rem;
    background: rgba(223, 139, 44, 0.09);
    border: 1px dashed rgba(223, 139, 44, 0.4);
    border-radius: var(--aize-radius-md);
}

.pending-notice p {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--aize-ink);
}

.info-banner {
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: rgba(191, 219, 229, 0.25);
    border: 1px solid rgba(15, 118, 110, 0.15);
    border-radius: var(--aize-radius-md);
}

.info-banner h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.faq-group {
    margin-bottom: 2.75rem;
}

.faq-group-title {
    font-size: 1.35rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(15, 118, 110, 0.18);
}

.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    background: var(--aize-paper);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.35rem;
    border: 0;
    background: transparent;
    color: var(--aize-ink);
    font-weight: 600;
    font-size: 1rem;
    text-align: start;
    cursor: pointer;
}

.faq-symbol {
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--aize-teal);
    transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-symbol {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.35rem 1.25rem;
}

.faq-answer p {
    margin: 0;
    color: var(--aize-ink-soft);
}

.faq-answer[hidden] {
    display: none;
}

/* -------------------------------------------------------------------------
 * Agents
 * ---------------------------------------------------------------------- */

.agent-list {
    display: grid;
    gap: 1.25rem;
}

.agent-card .agent-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * CTA band
 * ---------------------------------------------------------------------- */

.cta-band {
    margin-top: 1rem;
}

.cta-band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-xl);
}

.cta-band-inner h2 {
    margin-bottom: 0.5rem;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    max-width: 22ch;
}

.cta-band-inner p {
    margin: 0;
    max-width: 55ch;
}

/* -------------------------------------------------------------------------
 * Related links
 * ---------------------------------------------------------------------- */

.related-links {
    padding-block: 2.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--aize-line);
}

.related-title {
    font-size: 1.1rem;
    font-family: "Vazirmatn", sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

.related-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
}

.related-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--aize-teal-deep);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.related-links a:hover {
    border-color: rgba(15, 118, 110, 0.4);
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.form-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: start;
}

.form-panel {
    padding: 2rem;
    background: var(--aize-paper-strong);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-xl);
    box-shadow: var(--aize-shadow-soft);
}

.form-field {
    margin-bottom: 1.35rem;
}

.form-field label,
.form-field legend {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-field fieldset {
    border: 0;
    padding: 0;
}

.captcha-field {
    padding: 1rem;
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
    background: var(--aize-paper);
}

.captcha-field input[type="text"] {
    max-width: 11rem;
}

.captcha-question {
    margin: 0 0 0.75rem;
    color: var(--aize-ink-soft);
}

.required {
    color: var(--aize-coral);
}

.optional {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--aize-ink-soft);
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.radio-chip {
    position: relative;
    display: inline-flex;
}

.radio-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.radio-chip span {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.radio-chip input:checked + span {
    background: var(--aize-teal);
    border-color: var(--aize-teal);
    color: #fff;
}

.radio-chip input:focus-visible + span {
    outline: 3px solid var(--aize-teal);
    outline-offset: 2px;
}

/*
 * Honeypot — hidden from people, still a real field to a bot.
 *
 * NOT `left: -9999px`. Parking an element off-screen that way is mostly harmless in an LTR
 * document, but this site is RTL, where the inline start is the right edge, so a negative left
 * offset EXTENDS the scrollable area instead of leaving it. Every page carrying this form had a
 * document scrollWidth of ~10,389px against a 390px viewport — a full-width horizontal scrollbar
 * at every breakpoint, caused by a 1px field nobody can see.
 *
 * clip-path plus a zero-size box keeps it out of sight and out of the layout without contributing
 * scrollable width in either direction.
 */
.honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-message {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--aize-radius-md);
    font-weight: 600;
}

.form-message-success {
    background: rgba(15, 118, 110, 0.1);
    border: 1px solid rgba(15, 118, 110, 0.3);
    color: var(--aize-teal-deep);
}

.form-message-error {
    background: rgba(223, 109, 87, 0.1);
    border: 1px solid rgba(223, 109, 87, 0.35);
    color: #9c3a26;
}

.form-aside h2 {
    font-size: 1.3rem;
    font-family: "Vazirmatn", sans-serif;
    margin-bottom: 1rem;
}

.form-aside h3 {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.05rem;
}

.aside-note {
    margin-top: 1.25rem;
    font-size: 0.92rem;
    color: var(--aize-ink-soft);
}

.wallet-form {
    margin-bottom: 2.5rem;
}

.wallet-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    border: 0;
    padding: 0;
    margin-bottom: 1.5rem;
}

.wallet-package {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.15rem;
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}

.wallet-package:has(input:checked) {
    border-color: var(--aize-teal);
    background: rgba(15, 118, 110, 0.07);
}

.wallet-package-title {
    font-size: 0.85rem;
    color: var(--aize-ink-soft);
}

.wallet-package strong {
    font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
 * Legal documents
 * ---------------------------------------------------------------------- */

.legal-doc {
    max-width: 72ch;
}

.legal-doc h2 {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2.5rem 0 0.85rem;
    line-height: 1.4;
}

.legal-doc h2:first-of-type {
    margin-top: 2rem;
}

.legal-doc p,
.legal-doc li {
    color: var(--aize-ink-soft);
}

.legal-doc ul {
    margin: 0 0 1rem;
    padding-inline-start: 1.25rem;
}

.legal-doc li {
    margin-bottom: 0.4rem;
}

.legal-doc .lead-paragraph {
    padding: 1.1rem 1.35rem;
    background: rgba(191, 219, 229, 0.22);
    border-inline-start: 4px solid var(--aize-teal);
    border-radius: var(--aize-radius-sm);
    color: var(--aize-ink);
}

.legal-pending {
    padding: 1rem 1.25rem;
    background: rgba(223, 139, 44, 0.09);
    border: 1px dashed rgba(223, 139, 44, 0.4);
    border-radius: var(--aize-radius-sm);
}

/* -------------------------------------------------------------------------
 * Blog
 * ---------------------------------------------------------------------- */

.post-card-thumb img {
    border-radius: var(--aize-radius-md);
    margin-bottom: 0.5rem;
}

.post-card-title {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.post-card-title a {
    text-decoration: none;
}

.post-card-meta {
    font-size: 0.82rem;
    color: var(--aize-ink-soft);
    margin: 0;
}

.pagination-row {
    margin-top: 2.5rem;
}

.pagination-row .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pagination-row .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-sm);
    background: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-weight: 600;
}

.pagination-row .page-numbers.current {
    background: var(--aize-teal);
    border-color: var(--aize-teal);
    color: #fff;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.footer-content {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

.footer-blurb {
    font-size: 0.92rem;
    max-width: 40ch;
}

.footer-section h2 {
    font-family: "Vazirmatn", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.9rem;
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    display: inline-block;
    margin: 0;
    font-size: 0.9rem;
    text-decoration: none;
}

.footer-section a:hover,
.site-footer a:hover {
    color: #fff;
}

.footer-contacts {
    display: grid;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
}

.footer-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.footer-contact-row dt {
    color: rgba(255, 255, 255, 0.5);
}

.footer-contact-row dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.footer-address {
    margin-top: 1rem;
    font-size: 0.85rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: start;
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
}

.footer-region a {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Responsive
 *
 * style.css shipped with no media queries, so these are the theme's first.
 * ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .card-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .menu-toggle {
        display: inline-flex;
        order: 2;
    }

    .main-navigation {
        gap: 0.5rem;
    }

    .primary-menu {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 90;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 1rem;
        background: var(--aize-paper-strong);
        border-block: 1px solid var(--aize-line);
        box-shadow: var(--aize-shadow);
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .primary-menu[hidden],
    .primary-menu:not(.is-open) {
        display: none;
    }

    .primary-menu.is-open {
        display: flex;
    }

    .menu-link {
        width: 100%;
        justify-content: space-between;
        padding: 0.8rem 0.9rem;
        font-size: 1rem;
    }

    .dropdown-panel {
        position: static;
        min-width: 0;
        margin-block: 0.25rem 0.5rem;
        box-shadow: none;
        border: 0;
        background: rgba(15, 118, 110, 0.04);
        border-radius: var(--aize-radius-sm);
    }

    .header-shell {
        position: relative;
        flex-wrap: wrap;
    }

    .header-actions {
        order: 1;
        margin-inline-start: auto;
    }

    .header-link {
        display: none;
    }

    .split-panel,
    .form-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .card-grid.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-card .agent-spec {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .cta-band-inner {
        padding: 2rem;
    }
}

@media (max-width: 680px) {
    .section-shell {
        padding-block: 2.5rem;
    }

    .page-hero {
        padding-block: 2.5rem 1.5rem;
    }

    .page-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    /* Headline and call to action first: with the illustration on top, a
       390px screen showed only the picture and the h1 started below the fold. */
    .hero-visual img,
    .hero-section .hero-visual img {
        width: min(100%, 18rem);
        max-height: 14rem;
    }

    .hero-section .page-hero-inner {
        min-height: 0;
    }

    .home-section-visual {
        margin-block: 1.5rem;
    }

    .home-section-visual img,
    .home-section-visual-wide img,
    .home-section-visual-compact img {
        width: min(100%, 22rem);
        max-height: 14rem;
    }

    .acquisition-example {
        grid-template-columns: minmax(0, 1fr);
    }

    h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
        max-width: none;
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .page-hero h1,
    .hero-copy {
        max-width: none;
    }

    .card-grid.cols-2,
    .card-grid.cols-3,
    .card-grid.cols-4,
    .compare-panels,
    .wallet-package-grid,
    .spec-list,
    .doc-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .simple-list.two-column {
        columns: 1;
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem;
    }

    .tablist {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .tab-button {
        flex: 1 0 auto;
        padding: 0.6rem 1rem;
    }

    .hero-actions {
        gap: 0.7rem;
    }

    .hero-actions .cta-button {
        flex: 1 1 100%;
        justify-content: center;
    }

    .form-panel,
    .team-plan {
        padding: 1.4rem;
    }

    .cta-band-inner {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .step-item {
        padding: 1rem 1.15rem;
    }
}

@media (max-width: 560px) {
    /* Keep the sticky header on one row: two rows cost ~150px of a 844px
       viewport, pushing the hero CTAs out of view. */
    .header-shell {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.7rem 0;
    }

    .site-logo {
        width: 7rem;
    }

    .header-actions {
        gap: 0.4rem;
    }

    .header-actions .cta-button {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .menu-toggle {
        width: 2.4rem;
        height: 2.4rem;
        flex: 0 0 auto;
    }
}

@media (max-width: 460px) {
    .footer-content {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
 * Motion and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .cta-band,
    .related-links,
    .skip-link {
        display: none;
    }

    body {
        background: #fff;
    }

    .faq-answer[hidden] {
        display: block;
    }
}

/* ---- Model catalogue ------------------------------------------------- */

.catalog-group {
    margin-block: 2.5rem;
}

.catalog-group-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.catalog-group-count {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.6;
}

.model-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Explicit box so the mark never shifts layout while it loads. */
.model-brand-logo {
    width: 20px;
    height: 20px;
    flex: none;
    object-fit: contain;
}

.model-brand-monogram {
    width: 20px;
    height: 20px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
    opacity: 0.7;
}

.model-card h3 {
    font-size: 0.95rem;
    margin: 0;
    word-break: break-word;
}

.model-price {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

.model-price dt {
    opacity: 0.65;
}

.model-price dd {
    margin: 0;
}

.catalog-more > summary {
    cursor: pointer;
    padding: 0.6rem 0;
    font-size: 0.9rem;
}

.catalog-more .card-grid {
    margin-top: 1rem;
}

/* ==========================================================================
   How-to guides (page-guide.php, page-guides.php)
   ========================================================================== */

.guide-hero .narrow-block {
    display: grid;
    gap: 0.9rem;
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--aize-ink-soft);
}

.guide-meta li {
    padding: 0.35rem 0.8rem;
    background: var(--aize-paper);
    border: 1px solid var(--aize-line);
    border-radius: 999px;
}

.guide-steps {
    display: grid;
    gap: 2.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-step {
    display: grid;
    gap: 0.75rem;
    scroll-margin-top: 6rem;
}

.guide-step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guide-step-head h3 {
    margin: 0;
    font-size: 1.15rem;
}

.guide-step > p {
    margin: 0;
    padding-inline-start: 2.95rem;
    color: var(--aize-ink-soft);
    line-height: 1.9;
}

.guide-shot {
    margin: 0;
    margin-inline-start: 2.95rem;
    overflow: hidden;
    background: var(--aize-paper-strong);
    border: 1px solid var(--aize-line);
    border-radius: var(--aize-radius-md);
    box-shadow: var(--aize-shadow-soft);
}

.guide-shot {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: #1e1e1e;
}

/* Natural size, never stretched: the captures are 1x crops of real product panels, some of them
   narrow (a 283px side panel). Stretching them to the column width would blur the product's own
   text, which is the one thing these images exist to show. */
.guide-shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--aize-radius-sm);
}

.guide-use {
    justify-content: flex-start;
}

.guide-prompt {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--aize-bg);
    border-inline-start: 3px solid var(--aize-teal);
    border-radius: var(--aize-radius-sm);
    font-size: 0.95rem;
    line-height: 1.9;
}

.guide-prompt p {
    margin: 0;
}

.guide-copy {
    align-self: flex-start;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--aize-teal-deep);
    background: transparent;
    border: 1px solid var(--aize-line);
    border-radius: 999px;
    cursor: pointer;
}

.guide-copy:hover,
.guide-copy:focus-visible {
    border-color: var(--aize-teal);
}

.guide-outcome {
    margin: 0;
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--aize-ink-soft);
}

.guide-group + .guide-group {
    margin-top: 3rem;
}

@media (max-width: 640px) {
    .guide-step > p,
    .guide-shot {
        padding-inline-start: 0;
        margin-inline-start: 0;
    }
}

.guide-use-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}