/* کجا بودیم — marketing site. Palette mirrors the app's Tailwind theme. */

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/vazirmatn-arabic.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/vazirmatn-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+2010-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lalezar';
    src: url('fonts/lalezar-arabic.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
    --forest-950: #0A211E;
    --forest-900: #0D2A26;
    --forest-800: #123A33;
    --forest-700: #17493F;
    --forest-600: #1E5C4F;
    --forest-100: #D7E8DF;
    --gold-700: #8F5D24;
    --gold-600: #B4762E;
    --gold-400: #D3963F;
    --gold-300: #DEA95A;
    --gold-100: #F5E2C2;
    --gold-50: #FBF3E7;
    --ink: #1E1C18;
    --ink-soft: #4A453C;
    --muted: #665F53;
    --line: #E4E1D6;
    --paper: #F6F5F0;
    --white: #FFFFFF;
    --cream: #F3F1E9;
    --cream-soft: rgba(243, 241, 233, 0.78);

    --font-body: 'Vazirmatn', Tahoma, system-ui, sans-serif;
    --font-display: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
    --radius: 18px;
    --gutter: 16px;
    /* Height of the sticky header: two rows on phones without JS, one row with the menu button. */
    --header-h: 92px;
}
.js { --header-h: 56px; }
@media (min-width: 720px) {
    :root { --header-h: 68px; }
}
@media (min-width: 768px) {
    :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 800; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }

.skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -100px;
    z-index: 100;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--gold-400);
    color: var(--forest-900);
    font-weight: 800;
    text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ───── Buttons ───── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 0.9375rem; }
.btn-gold { background: var(--gold-400); color: var(--forest-900); }
.btn-gold:hover { background: var(--gold-300); }
.btn-forest { background: var(--forest-900); color: var(--cream); }
.btn-forest:hover { background: var(--forest-700); }
.btn-ghost { color: var(--cream); border-color: rgba(243, 241, 233, 0.3); }
.btn-ghost:hover { border-color: var(--cream); }

/* ───── Header ───── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13, 42, 38, 0.94);
    color: var(--cream);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}
.header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
    padding-block: 8px 4px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
    font-weight: 800;
    text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; fill: var(--gold-400); flex: none; }
.brand-mark .logo-dot { stroke: var(--gold-400); }

/* The mark's dot walks the path to the end, back to the start, then home (8s loop). --logo-at is its distance along the 93.7-unit path; the solid part ends and the faded part starts 7.5 units either side of it. */
@property --logo-at { syntax: '<number>'; inherits: true; initial-value: 46.85; }
.logo-behind, .logo-ahead { stroke-dasharray: 100 300; }
.logo-behind { stroke-dashoffset: calc((107.5 - var(--logo-at, 46.85)) * 1px); }
.logo-ahead { stroke-dashoffset: calc((-7.5 - var(--logo-at, 46.85)) * 1px); }
.logo-dot { stroke-dasharray: 0 400; stroke-dashoffset: calc(var(--logo-at, 46.85) * -1px); }
.logo-travel { animation: logo-travel 8s ease-in-out infinite; }
@keyframes logo-travel {
    0%, 5%, 95%, 100% { --logo-at: 46.85; }
    24%, 31% { --logo-at: 93; }
    69%, 76% { --logo-at: 0; }
}
.header-row .btn { margin-inline-start: auto; }
/* Phones: the links get their own full-width row, spread edge to edge (and scrollable if they still don't fit). */
.nav {
    order: 3;
    display: flex;
    justify-content: space-between;
    gap: 2px;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    margin-top: 4px;
    padding-inline: calc(var(--gutter) - 8px);
    overflow-x: auto;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
    padding: 6px 8px;
    border-radius: 999px;
    color: var(--cream-soft);
    font-size: 0.875rem;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
}
.nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.07); }
@media (min-width: 400px) {
    .nav a { padding-inline: 12px; font-size: 0.9375rem; }
}
@media (min-width: 720px) {
    .header-row { flex-wrap: nowrap; min-height: var(--header-h); padding-block: 0; }
    .nav { order: 0; justify-content: flex-start; width: auto; margin: 0; margin-inline-start: auto; padding-inline: 0; overflow: visible; }
    .header-row .btn { margin-inline-start: 8px; }
}

/* Phones with JS: one header row with a menu button; the links open as a panel under the header. */
.menu-toggle {
    display: none;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(243, 241, 233, 0.3);
    border-radius: 10px;
    background: transparent;
    color: var(--cream);
    cursor: pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s, background-color 0.2s;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before,
.menu-toggle span::after { content: ''; position: absolute; inset-inline-start: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded='true'] span { background-color: transparent; }
.menu-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 719.98px) {
    .js .header-row { flex-wrap: nowrap; gap: 8px; min-height: var(--header-h); padding-block: 8px; }
    .js .menu-toggle { display: grid; }
    .js .site-header.is-open { background: var(--forest-900); }
    .js .nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        display: grid;
        justify-content: stretch;
        gap: 0;
        width: auto;
        margin: 0;
        padding: 4px var(--gutter) 16px;
        overflow: visible;
        background: var(--forest-900);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: 0 28px 40px -24px rgba(0, 0, 0, 0.6);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
    }
    .js .site-header.is-open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s, transform 0.2s; }
    .js .nav a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        color: var(--cream);
        font-size: 1.125rem;
        font-weight: 700;
    }
    .js .nav a:first-child { border-top: 0; }
    .js .nav a::after { content: '←'; color: var(--gold-400); }
    .js .nav a:hover { background: none; color: var(--gold-300); }
    .js .header-row .btn { padding-inline: 14px; }
}

/* ───── The question, on a staff ───── */
/* Below ~490px the size tracks the viewport so the longest question still fits on one staff. */
.q {
    position: relative;
    isolation: isolate;
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, min(9.6vw - 0.2rem, 1.4rem + 4.4vw), 4.75rem);
    line-height: 1.35;
    text-wrap: balance;
    color: var(--forest-900);
    --staff: rgba(13, 42, 38, 0.11);
}
.q::before,
.hero-title::before {
    content: '';
    position: absolute;
    inset-inline: -100vw;
    top: 54%;
    z-index: -1;
    height: calc(4 * var(--gap, 0.15em) + 1px);
    transform: translateY(-50%);
    background: repeating-linear-gradient(to bottom, var(--staff) 0 1px, transparent 1px var(--gap, 0.15em));
    pointer-events: none;
}
/* Same spot as 54% of a single line, but stays on the first line if a title ever wraps. */
.q::before { top: 0.73em; }
.q-light { color: var(--cream); --staff: rgba(211, 150, 63, 0.24); }

.eyebrow {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--gold-700);
}
.lede {
    margin: 0;
    max-width: 40em;
    font-size: 1.1875rem;
    line-height: 2;
    color: var(--ink-soft);
}

/* ───── Hero ───── */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 48px 88px;
    background: var(--forest-900);
    color: var(--cream);
}
.hero-grid { display: grid; gap: 20px; }
.hero .eyebrow { color: var(--gold-300); }
.hero-title {
    position: relative;
    isolation: isolate;
    margin: 4px 0 12px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4.5rem, 2.2rem + 10vw, 9.5rem);
    line-height: 1.2;
    color: var(--cream);
    --staff: rgba(211, 150, 63, 0.26);
    --gap: 0.13em;
}
.qmark { color: var(--gold-400); }
.hero-lede {
    margin: 0;
    max-width: 34em;
    font-size: 1.1875rem;
    line-height: 2.05;
    color: var(--cream-soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: rgba(243, 241, 233, 0.62);
}
.hero-facts li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--gold-400);
    vertical-align: middle;
}
.hero-visual { position: relative; margin-top: 28px; padding-bottom: 32px; padding-inline-end: 14%; }
.browser {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 50px 90px -40px rgba(0, 0, 0, 0.75);
}
.browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding-inline: 12px;
    background: #E9E6DC;
    direction: ltr;
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFC9B8; }
.phone {
    margin: 0;
    padding: 6px;
    border-radius: 34px;
    background: #081B18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}
.phone img { width: 100%; border-radius: 28px; }
.hero-phone {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 30%;
    min-width: 128px;
}
@media (min-width: 1024px) {
    .hero { padding-block: 64px 112px; }
    .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 8px 56px; }
    .hero-head { grid-column: 1 / -1; }
    .hero-copy { padding-top: 24px; }
    .hero-visual { margin-top: 0; padding-inline-end: 0; }
    .hero-phone { inset-inline-end: -3%; bottom: -40px; width: 28%; }
}
/* Only push the visual into the margin once there is margin to spare. */
@media (min-width: 1360px) {
    .hero-visual { margin-inline-end: -4%; }
    .hero-phone { inset-inline-end: -6%; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
}
.hero-head > *,
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-head > :nth-child(2) { animation-delay: 0.06s; }
.hero-copy > * { animation-delay: 0.16s; }
.browser { animation: rise 0.9s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-phone { animation: rise 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ───── Roles ───── */
.roles { padding-block: 64px 80px; background: var(--paper); }
.kicker { margin: 0 0 20px; font-size: 1rem; font-weight: 800; color: var(--muted); }
.roles-grid { display: grid; gap: 16px; }
.role {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.role:hover {
    border-color: var(--gold-300);
    box-shadow: 0 22px 44px -28px rgba(13, 42, 38, 0.4);
    transform: translateY(-2px);
}
.role-who { font-size: 0.875rem; font-weight: 800; color: var(--gold-700); }
.role-q {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
    line-height: 1.45;
    color: var(--forest-900);
}
.role-a { color: var(--muted); }
.role-link { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--forest-600); }
.role-link::after { content: ' ←'; }
@media (min-width: 900px) {
    .roles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───── Sections ───── */
.section {
    overflow-x: hidden;
    overflow-x: clip;
    padding-block: 72px;
    background: var(--paper);
}
.section-white { background: var(--white); }
.section-head { max-width: 780px; margin-bottom: 48px; }
@media (min-width: 768px) {
    .section { padding-block: 104px; }
}

.plate {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.plate img { width: 100%; cursor: zoom-in; }
.plate.is-cut img { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.plate-wide { max-width: 1000px; margin-inline: auto; }
.plate-wide figcaption {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--white);
    font-size: 0.9375rem;
    color: var(--muted);
}

.spots { display: grid; gap: 48px 40px; margin-top: 56px; }
/* Crops share the app's paper background, so letterboxing inside the plate is invisible. */
.spot .plate { aspect-ratio: 16 / 10; }
.spot .plate img { height: 100%; object-fit: contain; }
.spot h3 { margin: 22px 0 6px; font-size: 1.375rem; font-weight: 800; line-height: 1.5; }
.spot p { margin: 0; color: var(--ink-soft); }
@media (min-width: 760px) {
    .spots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; margin-top: 72px; }
}

.lead { display: grid; gap: 40px; align-items: start; }
.lead-copy h3 { margin: 0 0 8px; font-size: 1.75rem; font-weight: 800; line-height: 1.5; }
.lead-copy p { margin: 0; color: var(--ink-soft); }
.ticks { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
.ticks li { position: relative; padding-inline-start: 28px; }
.ticks li::before {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    top: 0.72em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 0 4px var(--gold-50);
}
.ticks b { color: var(--ink); }
/* Side by side from tablet up: stacked, the tall form screenshot runs over a thousand pixels. */
@media (min-width: 720px) {
    .lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; }
    .lead-copy { position: sticky; top: 104px; }
}
@media (min-width: 900px) {
    .lead { gap: 56px; }
}

/* ───── Feature lists ───── */
.list-title {
    margin: 64px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    font-size: 1.5rem;
    font-weight: 800;
}
@media (min-width: 768px) {
    .list-title { margin: 88px 0 28px; }
}
.features { display: grid; gap: 32px 48px; }
.feature-group h4 { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 800; color: var(--forest-700); }
.feature-group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.984rem; line-height: 1.8; color: var(--ink-soft); }
.feature-group li { position: relative; padding-inline-start: 18px; }
.feature-group li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.78em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-400);
}
@media (min-width: 640px) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: a swipeable row that runs to the screen edges. Wider: a plain grid. */
.strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(72%, 300px);
    gap: 16px;
    margin: 56px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-item { margin: 0; scroll-snap-align: start; }
@media (min-width: 640px) {
    .strip {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
        margin: 64px 0 0;
        padding: 0;
        overflow: visible;
    }
}
@media (min-width: 1024px) {
    .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.strip-item .plate { aspect-ratio: 16 / 10; }
.strip-item img { height: 100%; object-fit: cover; object-position: top center; }
.strip-item figcaption { margin-top: 10px; font-size: 0.9375rem; font-weight: 800; }

/* ───── Student phones ───── */
.phones {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(196px, 1fr);
    gap: 24px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.phone-item { margin: 0; scroll-snap-align: center; }
.phone-item .phone { max-width: 232px; margin-inline: auto; }
.phone-item img { cursor: zoom-in; }
.phone-item figcaption {
    max-width: 232px;
    margin: 16px auto 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    color: var(--ink-soft);
}
@media (min-width: 1180px) {
    .phones { margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ───── Made for Iran ───── */
.local { padding-block: 72px; background: var(--forest-900); color: var(--cream); }
.local-grid { display: grid; gap: 32px; }
.local-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
    line-height: 1.45;
}
.local-list { display: grid; gap: 4px 40px; margin: 0; padding: 0; list-style: none; color: var(--cream-soft); }
.local-list li { padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.local-list b { color: var(--gold-300); }
@media (min-width: 640px) {
    .local-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .local-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
}

/* ───── Pricing ───── */
/* Title and billing period share a row when there is room; otherwise the period drops below. */
.tiers-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 28px;
}
.tiers-title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.6; color: var(--forest-900); }

/* Phones: four equal cells with the discount under each label. Wider: one inline row. */
.periods {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    min-inline-size: 0;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
}
.periods legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.periods label { position: relative; display: grid; cursor: pointer; }
.periods input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.periods span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding: 5px 2px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    color: var(--ink-soft);
    transition: background-color 0.15s, color 0.15s;
}
.periods em { font-size: 0.75rem; font-style: normal; font-weight: 700; white-space: nowrap; color: var(--gold-700); }
.periods input:checked + span { background: var(--forest-900); color: var(--cream); }
.periods input:checked + span em { color: var(--gold-300); }
.periods input:focus-visible + span { outline: 3px solid var(--gold-400); outline-offset: 2px; }
/* Phones: the cards and calculator below run several screens, so keep the period within reach.
   The wrapper steps aside so the toggle can stick for the whole pricing block, not just its own row;
   the fieldset becomes a full-width band under the header and ::before draws the toggle's track. */
@media (max-width: 639.98px) {
    .tiers-head { display: contents; }
    .tiers-title { margin-bottom: 6px; }
    .periods {
        position: sticky;
        top: calc(var(--header-h) - 1px);
        z-index: 5;
        margin: 0 calc(-1 * var(--gutter)) 16px;
        padding: 8px calc(var(--gutter) + 4px);
        border: 0;
        border-radius: 0;
        background: var(--white);
        transition: box-shadow 0.2s;
    }
    .periods::before {
        content: '';
        position: absolute;
        inset: 8px var(--gutter);
        z-index: -1;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--paper);
    }
    .periods.is-stuck { box-shadow: 0 12px 20px -14px rgba(13, 42, 38, 0.4); }
}
@media (min-width: 640px) {
    .periods { display: inline-grid; flex: none; grid-template-columns: repeat(4, auto); gap: 4px; }
    .periods span { display: block; padding: 9px 16px; font-size: 0.9375rem; line-height: inherit; }
    .periods em { margin-inline-start: 4px; font-size: 0.8125rem; }
}

.tiers { display: grid; gap: 16px; }
.tier {
    position: relative;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tier.is-current {
    border-color: var(--gold-400);
    box-shadow: 0 0 0 1px var(--gold-400), 0 24px 48px -30px rgba(143, 93, 36, 0.5);
}
.tier.is-current::after {
    content: 'تعرفه شما';
    position: absolute;
    top: -13px;
    inset-inline-end: 24px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--gold-400);
    color: var(--forest-900);
    font-size: 0.8125rem;
    font-weight: 800;
}
.tier h3 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.tier-for { margin: 2px 0 22px; font-size: 0.9375rem; color: var(--muted); }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.tier-price .now {
    font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.875rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--forest-900);
}
.tier-price span { font-weight: 800; color: var(--ink-soft); }
.tier-price .was { order: -1; width: 100%; font-size: 1rem; color: var(--muted); }
.tier-unit { margin: 2px 0 0; font-size: 0.9375rem; color: var(--muted); }
.tier-example {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}
/* Tablet: cards stay stacked, so lay each one out sideways — name on one side, price on the other. */
@media (min-width: 600px) and (max-width: 899px) {
    .tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
    .tier h3 { grid-area: 1 / 1; align-self: end; }
    .tier-for { grid-area: 2 / 1; margin-bottom: 0; }
    .tier-price { grid-area: 1 / 2; justify-content: flex-end; }
    .tier-price .was { text-align: end; }
    .tier-unit { grid-area: 2 / 2; text-align: end; }
    .tier-example { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.calc {
    display: grid;
    gap: 24px;
    margin-top: 28px;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.calc h3 { margin: 0 0 16px; font-size: 1.25rem; font-weight: 800; }
.calc label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 800; }
.calc-controls { display: flex; align-items: center; gap: 14px; }
.calc input[type='range'] { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--forest-600); }
.calc input[type='number'] {
    flex: none;
    width: 88px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 800;
    text-align: center;
    color: var(--ink);
}
.calc label.solo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}
.calc label.solo:has(input:checked) { border-color: var(--forest-600); background: var(--gold-50); }
.calc label.solo:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.solo input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--forest-600); }
.solo em { display: block; font-style: normal; font-weight: 700; font-size: 0.875rem; color: var(--forest-600); }
.solo-note { margin: 8px 0 0; font-size: 0.875rem; color: var(--muted); }
.calc-note { margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); }
.calc-out { margin: 0; }
.calc-out > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
}
.calc-out dt { color: var(--ink-soft); }
.calc-out dd { margin: 0; font-weight: 800; }
.calc-out .calc-total dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--forest-900);
}
.calc-out .calc-was { font-size: 1rem; font-weight: 700; color: var(--muted); }
.calc-out .calc-save { border-bottom: 0; }
.calc-out .calc-save dd, .calc-out .calc-solo dd { color: var(--forest-600); }
@media (min-width: 640px) {
    .calc { padding: 28px; }
    .calc input[type='number'] { width: 104px; }
}
@media (min-width: 900px) {
    .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; padding: 36px 40px; }
}

.included {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}
.included li::before { content: '✓'; margin-inline-end: 8px; font-weight: 900; color: var(--forest-600); }

/* ───── Offer ───── */
.section-gold { background: var(--gold-50); }
.offers { display: grid; gap: 16px; }
.offer-card {
    padding: 32px 28px;
    border: 1px solid var(--gold-100);
    border-radius: var(--radius);
    background: var(--white);
}
.offer-card h3 { margin: 0 0 10px; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 900; line-height: 1.4; color: var(--forest-900); }
.offer-card h3 span { color: var(--gold-600); }
.offer-card p { margin: 0; color: var(--ink-soft); }
.offer-cta { margin-top: 28px; }
@media (min-width: 900px) {
    .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───── FAQ ───── */
.faq-grid { display: grid; gap: 8px; }
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.7;
    list-style: none;
    cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    flex: none;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--gold-600);
    transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; color: var(--ink-soft); }

/* ───── Contact ───── */
.cta {
    overflow-x: hidden;
    overflow-x: clip;
    padding-block: 88px;
    background: var(--forest-900);
    color: var(--cream);
}
.cta-grid { display: grid; gap: 36px; align-items: center; }
.cta-lede { margin: 0; max-width: 34em; font-size: 1.1875rem; line-height: 2; color: var(--cream-soft); }
/* Positioned so the cards paint above the heading's staff lines. */
.contact { position: relative; display: grid; gap: 12px; }
.contact-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: var(--forest-800);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.contact-line:hover { border-color: var(--gold-400); }
.contact-label { font-size: 0.875rem; color: rgba(243, 241, 233, 0.6); }
.contact-value { font-size: 1.375rem; font-weight: 800; unicode-bidi: isolate; }
@media (min-width: 900px) {
    .cta { padding-block: 112px; }
    .cta-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; }
}

/* ───── Footer ───── */
.site-footer { padding-block: 44px 40px; background: var(--forest-950); color: rgba(243, 241, 233, 0.62); font-size: 0.9375rem; }
.site-footer .brand { color: var(--cream); }
.footer-row { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.footer-row p { margin: 0; }
.footer-row .brand { margin-bottom: 4px; }
.footer-note { font-size: 0.8125rem; }
.credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.credit img { width: 56px; margin-bottom: 10px; opacity: 0.92; transition: opacity 0.2s, transform 0.2s; }
.credit:hover img { opacity: 1; transform: translateY(-2px); }
.credit p { margin: 0; }
.credit-kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(243, 241, 233, 0.45);
}
.credit-name { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; font-size: 1rem; color: var(--cream-soft); }
.credit-name b { font-weight: 800; letter-spacing: 0.06em; color: var(--gold-300); }
.credit-name span { color: rgba(243, 241, 233, 0.3); }

/* ───── Zoom ───── */
.zoom {
    max-width: min(1400px, 96vw);
    max-height: 94vh;
    padding: 0;
    overflow: auto;
    border: 0;
    background: transparent;
}
.zoom::backdrop { background: rgba(8, 27, 24, 0.88); }
.zoom img { width: auto; max-width: 100%; max-height: 92vh; margin: auto; border-radius: 12px; }
/* Phones: a desktop screenshot fitted to the screen is no bigger than it was inline,
   so open it near its real width and let the viewer pan around it. */
@media (max-width: 759px) {
    .zoom.is-wide[open] {
        display: flex;
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
    }
    .zoom.is-wide img { flex: none; width: min(var(--zoom-width, 900px), 1000px); max-width: none; max-height: none; border-radius: 0; }
}
.zoom-close {
    z-index: 1;
    position: fixed;
    top: 16px;
    inset-inline-end: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--forest-900);
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .brand-mark.logo-travel { animation: logo-travel 8s ease-in-out infinite !important; }
}

/* ───── Guide links (FAQ card, footer) ───── */
.guide-link {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.guide-link:hover { border-color: var(--gold-300); box-shadow: 0 22px 44px -28px rgba(13, 42, 38, 0.4); transform: translateY(-2px); }
.guide-link-kicker { font-size: 0.875rem; font-weight: 800; color: var(--gold-700); }
.guide-link-title { font-size: 1.25rem; font-weight: 800; color: var(--forest-900); }
.guide-link-title::after { content: ' ←'; color: var(--gold-600); }
.guide-link-roles { font-size: 0.9375rem; color: var(--muted); }
.faq a { color: var(--forest-600); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 10px; }
.footer-links a { color: var(--cream-soft); text-decoration: none; }
.footer-links a:hover { color: var(--gold-300); }