/* TS v1.1 - 11.11.2026 */
/* Mazeh product page (/mazeh/ and /he/mazeh/).
   Loaded after styles.css. Built from the site's tokens and components
   (.hero, .section, .bento-card, .process-step, .tag, .plans-badge, .text-gradient);
   this file only adds what those pages need on top. */

:root {
    /* Mazeh's own sign colours, from the app's "Bilingual Street Sign" design system */
    --mazeh-plate-yellow: #f2c200;
    --mazeh-plate-black: #16181d;
    /* Background of the app renderings in img/mazeh/, so their frames have no visible seam */
    --mazeh-art-bg: #1c1c1c;
}

/* The page you are on, in the top menu */
.nav-link[aria-current="page"] {
    color: var(--accent-cyan);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.mazeh-hero {
    min-height: 0;
    padding: 11rem 0 5rem;
}

.mazeh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-areas:
        "text icon"
        "text demo";
    column-gap: 4rem;
    row-gap: 1.75rem;
    align-items: center;
}

.mazeh-hero-text {
    grid-area: text;
}

.mazeh-icon-wrap {
    grid-area: icon;
    align-self: end;
    position: relative;
    width: 128px;
}

/* Same soft gradient halo the homepage puts behind the profile photo */
.mazeh-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: var(--gradient-main);
    border-radius: 28%;
    opacity: 0.45;
    filter: blur(22px);
}

.mazeh-icon {
    position: relative;
    width: 100%;
    height: auto;
}

.mazeh-title {
    margin-bottom: 1.5rem;
}

.mazeh-name {
    display: block;
    width: fit-content;
    font-size: 5rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.mazeh-tagline {
    display: block;
    max-width: 22ch;
    margin-top: 0.9rem;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.mazeh-hero .plans-badge {
    margin-bottom: 1.25rem;
}

.mazeh-hero .hero-subtitle {
    max-width: 34rem;
    margin-bottom: 2rem;
}

.mazeh-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.mazeh-nowrap {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Download call to action
   The Download button is a plain link to /get/mazeh/Mazeh.dmg. The Subscribe
   button is in the page from the start and stays hidden until js/mazeh.js adds
   .mazeh-purchase-live to <html> (MAZEH_PURCHASE_URL filled in).
   -------------------------------------------------------------------------- */
.mazeh-download-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.9rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

.mazeh-subscribe {
    display: none;
    align-items: center;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    transition: var(--transition-smooth);
}

.mazeh-purchase-live .mazeh-subscribe {
    display: inline-flex;
}

.mazeh-subscribe:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Version and size of the current release, filled in from /get/mazeh/update.json */
.mazeh-release {
    margin-top: 0.9rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.mazeh-pricing {
    max-width: 34rem;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Framed app renderings
   -------------------------------------------------------------------------- */
.mazeh-shot {
    margin: 0;
    padding: 1.25rem;
    background: var(--mazeh-art-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(14, 165, 233, 0.1);
}

.mazeh-shot img {
    width: 100%;
    height: auto;
}

.mazeh-shot figcaption {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.mazeh-demo {
    grid-area: demo;
    align-self: start;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.mazeh-lead {
    max-width: 38rem;
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

/* Three-up cards: the three ways to ask and the three install steps.
   The numbers carry the order, so no arrows between them */
.mazeh-ways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mazeh-ways .process-step {
    padding: 2rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.mazeh-ways .process-step::after {
    display: none;
}

.mazeh-ways-note {
    max-width: 40rem;
    margin: 2.5rem auto 0;
    text-align: center;
    color: var(--text-secondary);
}

/* What it does: four cards beside the five sign themes */
.mazeh-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 1.5rem;
    align-items: stretch;
}

/* The themes rendering keeps its own height beside the three rows of cards */
.mazeh-features > .mazeh-shot {
    align-self: start;
}

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

.mazeh-feature-cards .bento-card,
.mazeh-duo .bento-card {
    min-height: 0;
}

/* Term chips drawn like the app draws them: licence-plate yellow, black type */
.tag.mazeh-chip {
    background: var(--mazeh-plate-yellow);
    border-color: var(--mazeh-plate-black);
    border-radius: 6px;
    color: var(--mazeh-plate-black);
    font-weight: 700;
    direction: ltr;
}

/* Privacy band */
.mazeh-privacy {
    text-align: center;
}

.mazeh-privacy .card-icon {
    margin-bottom: 1rem;
}

.mazeh-privacy p {
    max-width: 46rem;
    margin: 0 auto;
    text-wrap: balance;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Requirements and support */
.mazeh-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.mazeh-checks {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mazeh-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.mazeh-checks li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--accent-cyan);
    font-weight: 700;
}

.mazeh-checks-note {
    margin-top: 1.25rem;
}

.mazeh-mail {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    direction: ltr;
    unicode-bidi: isolate;
    text-decoration: underline;
    text-decoration-color: rgba(14, 165, 233, 0.5);
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.mazeh-mail:hover {
    color: var(--accent-cyan);
}

/* Closing call to action */
.mazeh-get {
    text-align: center;
}

.mazeh-get .mazeh-icon-wrap {
    width: 88px;
    margin: 0 auto 1.5rem;
}

.mazeh-get .mazeh-cta-row {
    justify-content: center;
}

.mazeh-get .mazeh-pricing {
    margin-inline: auto;
}

.mazeh-get-note {
    margin-top: 1.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .mazeh-features {
        grid-template-columns: minmax(0, 1fr);
    }

    .mazeh-features .mazeh-shot {
        width: 100%;
        max-width: 26rem;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .mazeh-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "icon"
            "text"
            "demo";
        justify-items: center;
        text-align: center;
    }

    .mazeh-icon-wrap {
        width: 104px;
    }

    .mazeh-name,
    .mazeh-tagline,
    .mazeh-hero .hero-subtitle,
    .mazeh-pricing {
        margin-inline: auto;
    }

    .mazeh-cta-row {
        flex-direction: column;
    }

    /* Stacked layout: the next section is right below, and the version line belongs under the button */
    .mazeh-cta-row .nav-link {
        display: none;
    }

    .mazeh-demo {
        width: 100%;
        max-width: 30rem;
    }
}

@media (max-width: 768px) {
    .mazeh-hero {
        padding: 7.5rem 0 3rem;
    }

    .mazeh-name {
        font-size: 3.5rem;
    }

    .mazeh-tagline {
        font-size: 1.4rem;
    }

    .mazeh-shot {
        padding: 0.9rem;
        border-radius: var(--radius-md);
    }

    .mazeh-ways,
    .mazeh-feature-cards,
    .mazeh-duo {
        grid-template-columns: minmax(0, 1fr);
    }

    .mazeh-ways {
        gap: 1rem;
    }

    .mazeh-ways .process-step {
        padding: 1.5rem;
    }

    .mazeh-lead {
        margin-bottom: 2rem;
    }

    .mazeh-privacy p {
        font-size: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   Hebrew (right-to-left)
   -------------------------------------------------------------------------- */
html[dir="rtl"] .mazeh-tagline {
    letter-spacing: 0;
}

/* The site's badge is all caps; in Hebrew that would turn "Mac" into "MAC" */
html[dir="rtl"] .mazeh-hero .plans-badge {
    text-transform: none;
}

/* The name stays in Latin letters on the Hebrew page */
html[dir="rtl"] .mazeh-name {
    direction: ltr;
}