/* ==========================================================================
   /aux-go/install: installing آکس‌گو, for anyone.
   Loaded only on that page, after aux-go-landing.css, whose palette and
   buttons it reuses. Everything here is sized for reading at arm's length:
   a person following steps on the same phone they are tapping.
   ========================================================================== */

.go-in [hidden] { display: none !important; }
.go-in p { font-size: 1.0625rem; }

/* ---- hero ------------------------------------------------------------------ */
.in-hero { text-align: center; }
.in-hero__wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: .75rem; }
.in-hero__icon { border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.in-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; line-height: 1.4; margin: .25rem 0 0; color: var(--lp-board); }
.in-hero .lp-hero__lede { margin: 0; max-width: 40ch; color: #e6ddd0; }
.in-address {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem;
    margin-top: .5rem; padding: .75rem 1rem; border-radius: 16px;
    background: rgba(246, 241, 232, .08); border: 1px solid rgba(246, 241, 232, .22);
}
.in-address__label { color: #cfc4b4; font-size: .95rem; }
.in-address__url { font-size: 1.6rem; letter-spacing: .02em; color: #fff; }
.in-copy {
    border: 0; border-radius: 999px; padding: .5rem 1rem; font: inherit; font-weight: 700;
    background: var(--lp-board); color: var(--lp-ink); cursor: pointer;
}

/* ---- device picker ----------------------------------------------------------- */
.in-pick { padding-bottom: 1rem !important; }
.in-detected { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 12px; background: #fff7e6; color: #6a4c12 !important; font-size: 1rem !important; }
.in-tabs { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-tab {
    display: grid; justify-items: center; gap: .5rem; padding: 1rem .5rem; min-height: 8.5rem;
    border: 2px solid var(--lp-line); border-radius: 18px; background: #fff; color: var(--lp-text);
    font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; text-align: center;
}
.in-tab svg { width: 44px; height: 44px; color: var(--lp-steel); }
.in-tab small { display: block; font-size: .78rem; font-weight: 500; color: var(--lp-text-2); margin-top: .15rem; }
.in-tab[aria-selected='true'] { border-color: var(--lp-red); background: #fff1f1; box-shadow: 0 6px 20px rgba(237, 28, 36, .15); }
.in-tab[aria-selected='true'] svg { color: var(--lp-red); }
@media (max-width: 420px) {
    .in-tab { min-height: 7.5rem; font-size: .95rem; }
    .in-tab svg { width: 38px; height: 38px; }
}

/* ---- one device's steps ------------------------------------------------------- */
.in-device { padding-top: 1.5rem !important; }
.in-device__title { margin-bottom: .25rem !important; }
.in-device__note { margin: 0 0 1.25rem; }
.in-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: in-step; }
.in-step {
    counter-increment: in-step;
    display: grid; gap: 1rem; align-items: center;
    padding: 1.25rem; border-radius: 20px; background: #fff; border: 1px solid var(--lp-line);
}
.in-step__text { display: grid; gap: .35rem; align-content: start; }
.in-step__text::before {
    content: counter(in-step, persian);
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--lp-red); color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: .25rem;
}
.in-step--done .in-step__text::before { content: '✓'; background: #1f8f4e; }
.in-step h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.6; }
.in-step p { margin: 0; }
.in-open { margin-top: .75rem; justify-self: start; font-size: 1.1rem; padding: .9rem 1.6rem; }
@media (min-width: 760px) {
    .in-step { grid-template-columns: minmax(0, 1fr) 15rem; padding: 1.5rem 2rem; }
    .in-step:has(.mk--wide) { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.in-plan-b { margin-top: 1rem; border-radius: 16px; background: var(--lp-board); border: 1px dashed var(--lp-kerf); }
.in-plan-b summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 800; font-size: 1.05rem; }
.in-plan-b__body { display: grid; gap: 1rem; padding: 0 1.25rem 1.25rem; align-items: center; }
.in-plan-b__body ol { margin: 0; padding-inline-start: 1.25rem; line-height: 2.1; font-size: 1.05rem; }
@media (min-width: 760px) { .in-plan-b__body { grid-template-columns: minmax(0, 1fr) 15rem; } }

/* ---- the drawings ------------------------------------------------------------- */
.mk { width: 100%; max-width: 15rem; height: auto; justify-self: center; display: block; font-family: inherit; }
.mk--wide { max-width: 22rem; }
.mk-body { fill: #1f1a15; }
.mk-screen { fill: #fbf8f2; }
.mk-dim { fill: #8f877c; }
.mk-bar, .mk-pill { fill: #ece6db; }
.mk-line { fill: #e2d9c9; }
.mk-card { fill: #f1ebe0; }
.mk-sheet { fill: #fff; }
.mk-dialog { fill: #fff; stroke: #e2d9c9; stroke-width: 1; }
.mk-red { fill: #ed1c24; }
.mk-blue-btn { fill: #1a73e8; }
.mk-ink { fill: #3b342c; }
.mk-ink-stroke { fill: none; stroke: #3b342c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-title { font-size: 13px; font-weight: 800; fill: #221c16; }
.mk-small { font-size: 10.5px; fill: #3b342c; }
.mk-muted { fill: #8a7f71; }
.mk-strong { font-weight: 800; }
.mk-blue { fill: #1e7bf0; }
.mk-btn { font-size: 13px; font-weight: 800; fill: #fff; }
.mk-btn--sm { font-size: 10.5px; }

/* The place to tap: a red ring that breathes, so the eye finds it first. */
.mk-tap {
    fill: rgba(237, 28, 36, .16); stroke: #ed1c24; stroke-width: 3;
    transform-box: fill-box; transform-origin: center;
    animation: in-tap 1.6s ease-in-out infinite;
}
.mk-tap--late { animation-delay: .8s; }
@keyframes in-tap {
    0%, 100% { transform: scale(.82); opacity: 1; }
    50% { transform: scale(1.08); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .mk-tap { animation: none; } }

/* ---- laptop to phone ------------------------------------------------------------ */
.in-phone { background: var(--lp-ink); color: var(--lp-board); }
.in-phone h2 { color: var(--lp-board); }
.in-phone p { color: #d8cebf; }
.in-phone__wrap { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .in-phone__wrap { grid-template-columns: minmax(0, 1fr) 15rem; } }
.in-qr { margin: 0; justify-self: center; display: grid; gap: .5rem; text-align: center; }
.in-qr img { width: 13.75rem; height: 13.75rem; padding: .75rem; background: #fff; border-radius: 18px; }
.in-qr figcaption { font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; }
.in-wa { background: #1fa855; color: #fff; display: inline-flex; gap: .5rem; align-items: center; }
.in-wa:hover { color: #fff; }

/* ---- troubles ------------------------------------------------------------------- */
.in-faq { display: grid; gap: .625rem; margin-top: 1rem; }
.in-faq details { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; padding: 0 1.1rem; }
.in-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 800; font-size: 1.05rem; }
.in-faq details p { margin: 0 0 1rem; }

/* ---- share --------------------------------------------------------------------- */
.in-share__wrap { display: grid; gap: 1.25rem; align-items: center; }
.in-share__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.in-more { border-color: var(--lp-line) !important; color: var(--lp-text) !important; }
@media (min-width: 760px) { .in-share__wrap { grid-template-columns: minmax(0, 1fr) auto; } }

/* A button is a button, wherever the theme says links are underlined; and an
   English label the reader must find on screen is never broken across lines. */
.go-in .lp-btn, .go-in .lp-btn:hover { text-decoration: none; }
.go-in [dir='ltr'] { white-space: nowrap; unicode-bidi: isolate; }