/* Static pages (Oct 2026): Trade or sell, Disc check, Pay with Fawry, About us, the policies, Request account deletion and
   the 404 page. Everything is scoped under .sp; each page adds its own modifier (.sp--tradein, .sp--disc, .sp--fawry,
   .sp--about, .sp--doc, .sp--404) and its rules sit in that page's block below the shared ones.
   Arena palette, logical properties (one file for both directions), motion = transform / opacity only, and every
   animation stops under prefers-reduced-motion (the last block). Design references: design/static-pages/. */

/* ============================================================================================================
   TOKENS AND BASE
   ============================================================================================================ */
.sp {
    --sp-page: #0b0d10;
    --sp-surface: #14171c;
    --sp-raised: #1a1d22;
    --sp-field: #171a20;
    --sp-deep: #101318;
    --sp-line: #23272e;
    --sp-line2: #2a2f37;
    --sp-text: #eef0f3;
    --sp-body: #c9ced4;
    --sp-muted: #9aa1a9;
    --sp-dim: #6f767f;
    --sp-lime: #bcd767;
    --sp-brand: #95ab52;
    --sp-brand-hover: #a8bf62;
    --sp-on-lime: #14200a;
    --sp-gold: #f4b63d;
    --sp-red: #ff5a5f;
    --sp-ps: #3d8bff;
    --sp-nin: #e60012;
    --sp-xb: #2fb52f;
    --sp-pc: #e0a43c;
    --sp-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    --sp-ease: cubic-bezier(.2, .7, .2, 1);
    --sp-r-lg: 22px;
    --sp-r-md: 16px;
    --sp-r-sm: 12px;

    position: relative;
    color: var(--sp-body);
    font-size: 15px;
    line-height: 1.6;
    padding-bottom: 56px;
}

.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp [hidden] { display: none !important; }
.sp p { margin: 0; }
.sp a { text-decoration: none; }

/* custom.css capitalises headings, labels and .btn with !important: sentence case here, so the H1 matches the title. */
.sp :is(h1, h2, h3, h4, h5, h6, label, button, summary, .sp-btn) { text-transform: none !important; letter-spacing: normal; }
.sp :is(h1, h2, h3, h4, h5) { margin: 0; color: var(--sp-text); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.sp :is(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--sp-lime); outline-offset: 3px; border-radius: 8px; }
.sp button { font-family: inherit; }
.sp .sp-num { font-variant-numeric: tabular-nums; }

/* The theme's .container is 100% wide with no gutter on phones: the pages use the site width tokens of g2.css (the
   same edges as the header and the home page); only paragraphs keep a reading measure (max-width in ch). */
.sp-wrap {
    width: 100%;
    max-width: var(--g2-wrap-max, 1180px);
    margin-inline: auto;
    padding-inline: var(--g2-wrap-pad, 16px);
}

/* Prices printed by ListProductsViewComponent.PriceMarkup (and the same markup from the scripts). */
.sp .g2e-price { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.sp .g2e-price__cur { font-size: .7em; font-weight: 500; color: var(--sp-muted); }
.sp .g2e-price__num { color: inherit; }
.sp .g2e-price__dec { font-size: .72em; }

/* ============================================================================================================
   SHARED BLOCKS
   ============================================================================================================ */

/* Breadcrumb */
.sp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 22px 0 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--sp-dim);
}

.sp-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.sp-crumbs li + li::before { content: "/"; color: var(--sp-dim); }
.sp-crumbs a { color: var(--sp-dim) !important; }
.sp-crumbs a:hover { color: var(--sp-text) !important; }
.sp-crumbs [aria-current="page"] { color: var(--sp-muted); }

/* Eyebrow */
.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sp-lime);
}

.sp-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
[dir="rtl"] .sp-eyebrow { letter-spacing: 0; }

/* Buttons */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .2s var(--sp-ease), background-color .2s, border-color .2s, opacity .2s;
}

.sp-btn:active { transform: scale(.97); }
.sp-btn--primary { background: var(--sp-brand); color: #0b0d10 !important; }
.sp-btn--primary:hover, .sp-btn--primary:focus-visible { background: var(--sp-brand-hover); }
.sp-btn--ghost { background: transparent; border-color: var(--sp-line2); color: var(--sp-text) !important; }
.sp-btn--ghost:hover, .sp-btn--ghost:focus-visible { background: var(--sp-raised); }
.sp-btn[disabled], .sp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.sp-btn--primary[disabled] { color: #c9ced4 !important; background: #2a2f37; opacity: 1; }
.sp-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Pills */
.sp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    font-size: 13px;
    color: var(--sp-text) !important;
}

.sp-pill svg { width: 15px; height: 15px; color: var(--sp-lime); flex: 0 0 auto; }
.sp-pill > i { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-tone, var(--sp-lime)); }
a.sp-pill:hover { border-color: #343a43; background: var(--sp-raised); }
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Verdict tones (disc grades): lime = we buy it, gold = checked at the store, red = we can't buy it */
.sp-ok { --sp-tone: var(--sp-lime); }
.sp-check { --sp-tone: var(--sp-gold); }
.sp-no { --sp-tone: var(--sp-red); }

/* Cards */
.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.sp-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-tile { padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.sp-tile h3 { font-size: 17px; }
.sp-tile p { font-size: 14px; color: var(--sp-muted); }
.sp-tile__kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-lime); }
[dir="rtl"] .sp-tile__kicker { letter-spacing: 0; }

.sp-tile__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(188, 215, 103, .1);
    color: var(--sp-lime);
}

.sp-tile__icon svg { width: 20px; height: 20px; }
.sp-tile--gold .sp-tile__icon { background: #1f2329; color: var(--sp-gold); }

a.sp-tile { color: inherit !important; transition: transform .3s var(--sp-ease), border-color .3s; }
a.sp-tile:hover { transform: translateY(-4px); border-color: rgba(188, 215, 103, .4); }

/* Sections */
.sp-section { padding-block: clamp(40px, 6vw, 72px); }
.sp-section--tight { padding-top: 0; }
.sp-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 64ch; }
.sp-head h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.015em; }
.sp-head p { color: var(--sp-muted); }
[dir="rtl"] .sp-head h2 { letter-spacing: 0; }

/* Hero */
.sp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 28px 48px; }
.sp-hero h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-block: 14px 16px; }
.sp-hero h1 em { font-style: normal; color: var(--sp-lime); }
.sp-hero__lead { font-size: 16.5px; max-width: 50ch; }
.sp-hero .sp-pills { margin-block: 22px 26px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
[dir="rtl"] .sp-hero h1 { letter-spacing: 0; line-height: 1.25; }

.sp-rise { animation: sp-rise .7s var(--sp-ease) both; }
@keyframes sp-rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }

/* Numbered steps (4 across, a line behind the numbers) */
.sp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sp-steps::before { content: ""; position: absolute; top: 23px; inset-inline: 6%; height: 2px; background: linear-gradient(90deg, var(--sp-brand), var(--sp-line) 85%); }
[dir="rtl"] .sp-steps::before { background: linear-gradient(270deg, var(--sp-brand), var(--sp-line) 85%); }
.sp-step { position: relative; display: grid; gap: 10px; align-content: start; }

.sp-step__no {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line2);
    color: var(--sp-lime);
    font-weight: 700;
}

.sp-step h3 { font-size: 16px; }
.sp-step p { font-size: 13.5px; color: var(--sp-muted); }

/* Numbered list (vertical) */
.sp-vsteps { display: grid; margin: 0; padding: 0; list-style: none; }
.sp-vstep { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.sp-vstep::before { content: ""; position: absolute; inset-inline-start: 19px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(var(--sp-brand), var(--sp-line)); }
.sp-vstep:last-child { padding-bottom: 0; }
.sp-vstep:last-child::before { display: none; }

.sp-vstep__no {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp-field);
    border: 1px solid rgba(188, 215, 103, .45);
    color: var(--sp-lime);
    font-weight: 700;
}

.sp-vstep h3 { font-size: 16px; margin-top: 8px; }
.sp-vstep p { font-size: 14px; color: var(--sp-muted); margin-top: 3px; }

/* Check / cross lists */
.sp-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-list { padding: 24px; }
.sp-list h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 17px; }
.sp-list ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-list li { display: flex; gap: 10px; font-size: 14px; }
.sp-list svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; }
.sp-list--yes svg { color: var(--sp-lime); }
.sp-list--no svg { color: var(--sp-red); }

/* FAQ accordion */
.sp-faq { display: grid; gap: 10px; max-width: 860px; }
.sp-faq details { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-r-md); overflow: hidden; }

.sp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; font-weight: 300; line-height: 1; color: var(--sp-lime); transition: transform .3s var(--sp-ease); }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq__a { padding: 0 22px 18px; color: var(--sp-muted); }
/* An open item: the answer starts below the summary's focus line (lime, 2px at a 3px offset), never under it. */
.sp-faq details[open] > .sp-faq__a { padding-top: 10px; }
.sp-faq__a > p, .sp-faq__a { max-width: 75ch; }

/* Closing CTA band */
.sp-endband {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: clamp(32px, 5vw, 56px);
    padding: clamp(40px, 6vw, 70px) 20px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--sp-line);
    background: linear-gradient(160deg, #161a14, #111418 60%);
    text-align: center;
}

.sp-endband::before { content: ""; position: absolute; inset: -40% 20% auto; height: 120%; background: radial-gradient(closest-side, rgba(188, 215, 103, .2), transparent); pointer-events: none; }
.sp-endband > * { position: relative; }
.sp-endband h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em; }
.sp-endband p { color: var(--sp-muted); max-width: 56ch; }
.sp-endband .sp-actions { justify-content: center; }
[dir="rtl"] .sp-endband h2 { letter-spacing: 0; }

/* Segmented control with a sliding indicator (g2.js "static pages" places .sp-seg__ind under the pressed button) */
.sp-seg {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: var(--sp-deep);
    border: 1px solid var(--sp-line);
}

.sp-seg::-webkit-scrollbar { display: none; }

.sp-seg button {
    position: relative;
    z-index: 1;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--sp-muted);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s;
}

.sp-seg button[aria-pressed="true"] { color: var(--sp-on-lime); font-weight: 600; }
/* Without the script the pressed button is lit by itself. */
.sp-seg:not(.is-ready) button[aria-pressed="true"] { background: var(--sp-lime); }

.sp-seg__ind {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--sp-lime);
    transition: transform .45s var(--sp-ease), width .45s var(--sp-ease);
}

/* Chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--sp-line2);
    border-radius: 999px;
    background: transparent;
    color: var(--sp-muted);
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.sp-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-tone, var(--sp-muted)); }
.sp-chip[aria-pressed="true"] { background: var(--sp-raised); color: var(--sp-text); border-color: var(--sp-tone, var(--sp-lime)); }
.sp-chip:hover { color: var(--sp-text); }
.sp-tone--ps { --sp-tone: var(--sp-ps); }
.sp-tone--nin { --sp-tone: var(--sp-nin); }
.sp-tone--xb { --sp-tone: var(--sp-xb); }
.sp-tone--pc { --sp-tone: var(--sp-pc); }

/* Phone-screen step player (g2.js "static pages": autoplay, tap to jump, pause; one .sp-player per page) */
.sp-player { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: clamp(18px, 3vw, 28px); }
.sp-player__switch { margin-bottom: 20px; }
.sp-psteps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.sp-pstep {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color .3s;
}

.sp-pstep:hover, .sp-pstep.is-on { background: var(--sp-field); }

.sp-pstep__no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--sp-line2);
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-muted);
    transition: background-color .3s, color .3s, border-color .3s;
}

.sp-pstep h3 { margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--sp-muted); transition: color .3s; }
.sp-pstep p { font-size: 13.5px; color: var(--sp-muted); margin-top: 4px; }
.sp-player.is-ready .sp-pstep p { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: opacity .4s var(--sp-ease); }
.sp-player.is-ready .sp-pstep.is-on p { max-height: none; margin-top: 4px; opacity: 1; }
.sp-pstep.is-on .sp-pstep__no { background: var(--sp-lime); color: var(--sp-on-lime); border-color: var(--sp-lime); }
.sp-pstep.is-on h3 { color: var(--sp-text); }
.sp-pstep.is-done .sp-pstep__no { color: var(--sp-lime); border-color: rgba(188, 215, 103, .4); }

.sp-pstep__bar { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 2px; background: var(--sp-lime); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .sp-pstep__bar { transform-origin: right; }
.sp-pstep.is-on .sp-pstep__bar { animation: sp-fill var(--sp-step-ms, 4200ms) linear both; }
.sp-player.is-paused .sp-pstep.is-on .sp-pstep__bar { animation-play-state: paused; }
@keyframes sp-fill { to { transform: scaleX(1); } }

.sp-player__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--sp-muted); }

.sp-player__ctl button {
    padding: 6px 14px;
    border: 1px solid var(--sp-line2);
    border-radius: 999px;
    background: none;
    color: var(--sp-text);
    font-size: 13px;
    cursor: pointer;
}

.sp-phone {
    position: relative;
    width: 260px;
    height: 520px;
    margin-inline: auto;
    padding: 12px;
    border-radius: 40px;
    background: linear-gradient(160deg, #2a2f37, #15181d);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px #3a404a;
}

.sp-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 30px; background: #0e1014; }
.sp-phone__notch { position: absolute; z-index: 3; top: 8px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 12px; background: #000; }

.sp-scr {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 44px 16px 16px;
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .45s var(--sp-ease), transform .45s var(--sp-ease);
}

.sp-scr.is-on { opacity: 1; transform: none; }
.sp-scr__t { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); }
[dir="rtl"] .sp-scr__t { letter-spacing: 0; }
.sp-scr h4 { font-size: 15px; }

.sp-scr__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sp-field);
    border: 1px solid var(--sp-line);
    font-size: 12px;
    color: var(--sp-body);
}

.sp-scr__row b { color: var(--sp-text); font-weight: 600; }
.sp-scr__row.is-sel { border-color: var(--sp-gold); box-shadow: 0 0 0 3px rgba(244, 182, 61, .12); }
.sp-scr__radio { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sp-line2); }
.sp-scr__row.is-sel .sp-scr__radio { border-color: var(--sp-gold); background: radial-gradient(circle, var(--sp-gold) 45%, transparent 50%); }
.sp-scr__row--go { justify-content: center; background: var(--sp-lime); border-color: var(--sp-lime); color: var(--sp-on-lime); font-weight: 600; }
.sp-scr__sms { padding: 12px; border-radius: 16px 16px 16px 4px; background: #1f2329; font-size: 12.5px; line-height: 1.5; color: var(--sp-text); }
[dir="rtl"] .sp-scr__sms { border-radius: 16px 16px 4px 16px; }
.sp-scr__ref { display: block; margin-top: 4px; font-family: var(--sp-mono); font-size: 20px; letter-spacing: .08em; color: var(--sp-gold); direction: ltr; }
.sp-scr__counter { padding: 18px 10px; border-radius: 16px; background: linear-gradient(160deg, #222019, #121212); border: 1px solid #3a3220; text-align: center; }
.sp-scr__counter small { display: block; font-size: 12px; color: var(--sp-muted); }
.sp-scr__counter b { font-family: var(--sp-mono); font-size: 38px; font-weight: 600; color: var(--sp-gold); }
.sp-scr__ok { display: grid; place-items: center; width: 82px; height: 82px; margin: 20px auto 6px; border-radius: 50%; background: rgba(188, 215, 103, .12); border: 2px solid var(--sp-lime); color: var(--sp-lime); }
.sp-scr__ok svg { width: 40px; height: 40px; }
.sp-scr.is-on .sp-scr__ok { animation: sp-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sp-pop { from { transform: scale(.4); } to { transform: none; } }
.sp-scr__note { font-size: 10.5px; color: var(--sp-dim); text-align: center; }

/* The small disc illustration (Shared/_DiscMini.cshtml): same art in the rule cards, the grade buttons and the tray */
.sp-mini {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #14171c 0 9%, #8d939c 9.5% 16%, transparent 16.5%),
        conic-gradient(from 30deg, #9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #9fb6c9);
}

.sp-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The spinning disc icon (disc-check band, Services menu): CSS only */
.sp-spin-disc {
    display: inline-block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0b0d10 0 8%, #c7ccd4 8.5% 11%, #8d939c 11.5% 17%, transparent 17.5%),
        conic-gradient(from 20deg, #9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #c9d1da, #9fb6c9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(0, 0, 0, .8);
    animation: sp-spin 3.6s linear infinite;
}

@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Store links (trade-in tray, About us) */
.sp-stores { display: grid; gap: 6px; }

.sp-store {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--sp-field);
    border: 1px solid var(--sp-line);
    color: var(--sp-text) !important;
    font-size: 13.5px;
    transition: border-color .2s, transform .2s var(--sp-ease);
}

.sp-store:hover { border-color: rgba(188, 215, 103, .5); transform: translateX(4px); }
[dir="rtl"] .sp-store:hover { transform: translateX(-4px); }
.sp-store small { display: block; font-size: 12px; color: var(--sp-muted); }
.sp-store__go { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--sp-lime); }

/* ============================================================================================================
   TRADE OR SELL (.sp--tradein)
   ============================================================================================================ */

/* Sell your used games and consoles, in four steps (Pick, Check, Offer, Sell): design/static-pages/tradein-steps.html
   (concept v10). Everything is .ti-* inside .sp--tradein; the Done screen (SellRequests/Done) uses the same root.
   Tones: lime = we buy it, gold = checked at the store / console only, red = we can't buy it. */
.sp--tradein { --ti-dir: 1; --ti-ps4: #6d7cff; overflow-x: clip; }
.sp--tradein[dir="rtl"] { --ti-dir: -1; }
.ti-ok { --ti-tone: var(--sp-lime); }
.ti-check { --ti-tone: var(--sp-gold); }
.ti-no { --ti-tone: var(--sp-red); }

/* The aurora behind the hero (transform only) */
.sp--tradein::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 520px;
    pointer-events: none;
    background: radial-gradient(30vw 18vw at 20% 30%, rgba(188, 215, 103, .10), transparent 70%), radial-gradient(26vw 16vw at 80% 20%, rgba(61, 139, 255, .10), transparent 70%);
    animation: ti-aurora 18s ease-in-out infinite alternate;
}

@keyframes ti-aurora { from { transform: translateX(-3%) translateY(0); } to { transform: translateX(3%) translateY(14px); } }
.sp--tradein > * { position: relative; }

/* Hero: compact, one line, floating art */
.ti-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 24px; padding-block: 10px 18px; }
.ti-hero__txt { display: grid; gap: 8px; }
.ti-hero h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ti-hero h1 em { font-style: normal; color: var(--sp-lime); }
.ti-hero p { font-size: 15px; color: var(--sp-muted); max-width: 56ch; }
.sp--tradein[dir="rtl"] .ti-hero h1 { letter-spacing: 0; line-height: 1.25; }
.ti-hero-art { position: relative; height: 150px; }
.ti-ring { position: absolute; inset: 10px 40px; border-radius: 50%; border: 1px solid rgba(188, 215, 103, .25); animation: ti-ring 5s var(--sp-ease) infinite; }
@keyframes ti-ring { 0%, 100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.05); opacity: 1; } }
.ti-ha { position: absolute; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)); }
.ti-ha-console { width: 120px; height: 90px; left: 30px; top: 22px; color: #e9edf2; animation: ti-bob 6s ease-in-out infinite; }
.ti-ha-pad { width: 82px; height: 62px; right: 6px; top: 64px; color: var(--sp-ps); animation: ti-bob 5.2s ease-in-out -1.6s infinite; }
.ti-ha-disc { width: 64px; height: 64px; right: 40px; top: 0; border-radius: 50%; background: conic-gradient(#9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #9fb6c9); animation: ti-bob 5.8s ease-in-out -3s infinite; }
.ti-ha-disc::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: var(--sp-page); }
.ti-ha-disc i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); animation: ti-spin 4s linear infinite; }
@keyframes ti-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes ti-spin { to { transform: rotate(360deg); } }
.ti-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-lime); box-shadow: 0 0 12px var(--sp-lime); animation: ti-twinkle 3.2s ease-in-out infinite; }
.ti-spark--1 { left: 18px; top: 20px; }
.ti-spark--2 { right: 10px; top: 30px; animation-delay: -1.1s; }
.ti-spark--3 { left: 120px; bottom: 6px; animation-delay: -2.2s; }
@keyframes ti-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

/* Steps bar (sticky) */
.ti-stepper {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-inline: calc(-1 * var(--g2-wrap-pad, 16px));
    padding: 12px var(--g2-wrap-pad, 16px);
    background: rgba(11, 13, 16, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sp-line);
    scroll-margin-top: 0;
}

.ti-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ti-steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--sp-muted); cursor: pointer; text-align: start; transition: background-color .25s, border-color .25s, color .25s; }
.ti-steps button:disabled { cursor: default; opacity: .55; }
.ti-steps .ti-n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1px solid var(--sp-line2); transition: background-color .3s, border-color .3s, color .3s; }
.ti-steps b { display: block; font-size: 14px; color: inherit; font-weight: 600; line-height: 1.2; } /* round 9: names only */
.ti-steps .is-on { background: var(--sp-surface); border-color: var(--sp-line2); color: var(--sp-text); }
.ti-steps .is-on .ti-n { background: var(--sp-lime); border-color: var(--sp-lime); color: var(--sp-on-lime); }
.ti-steps .is-done .ti-n { color: var(--sp-lime); border-color: rgba(188, 215, 103, .5); }
.ti-track { height: 3px; border-radius: 3px; background: #1d2128; margin-top: 10px; overflow: hidden; }
.ti-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sp-brand), var(--sp-lime)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--sp-ease); }
.sp--tradein[dir="rtl"] .ti-track i { transform-origin: right; background: linear-gradient(270deg, var(--sp-brand), var(--sp-lime)); }
/* Phones (round 9): the steps become one compact block - the current name, "Step 1 of 4 · next: …" muted, and a thin
   4-segment bar (each segment is a button: done steps go back). */
.ti-mstep { display: none; }
.ti-mstep__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ti-mstep__line b { color: var(--sp-text); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ti-mstep__line span { overflow: hidden; color: var(--sp-dim); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.ti-mstep__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.ti-mstep__bar button { display: block; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.ti-mstep__bar button:disabled { cursor: default; }
.ti-mstep__bar i { display: block; height: 3px; border-radius: 2px; background: var(--sp-line2); transition: background-color .3s; }
.ti-mstep__bar .is-on i, .ti-mstep__bar .is-done i { background: var(--sp-lime); }

/* Panels */
/* Room under the step's last content = the dock (measured into --ti-dock-h by trade_in.js) + its 14px offset + the phone's
   safe area + air, so the dock never has to sit on the step's buttons; scroll-padding keeps focused buttons clear of it. */
.ti-panel { padding-block: 32px calc(var(--ti-dock-h, 72px) + 48px + env(safe-area-inset-bottom, 0px)); animation: ti-enter .5s var(--sp-ease) both; }
html:has(.sp--tradein) { scroll-padding-bottom: calc(var(--ti-dock-h, 72px) + 28px + env(safe-area-inset-bottom, 0px)); }
.ti-panel.is-back { animation-name: ti-enter-back; }
@keyframes ti-enter { from { opacity: .001; transform: translateX(calc(18px * var(--ti-dir))); } }
@keyframes ti-enter-back { from { opacity: .001; transform: translateX(calc(-18px * var(--ti-dir))); } }
.ti-head { display: grid; gap: 4px; margin-bottom: 24px; }
.ti-head h2 { font-size: 24px; letter-spacing: -.01em; }
.ti-head p { color: var(--sp-muted); font-size: 14px; max-width: 60ch; }
.sp--tradein[dir="rtl"] .ti-head h2 { letter-spacing: 0; }

/* Step 1 "One shelf" (round 9, design/static-pages/pick-items.html tab A): the shelf and, from 992px, the side panel. */
.ti-shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.ti-shelf__main { min-width: 0; }
.ti-search { position: relative; display: block; margin: 0; border-radius: 14px; }
.ti-search svg { position: absolute; inset-inline-start: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--sp-muted); pointer-events: none; }
.ti-search input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--sp-line2); background: var(--sp-field); color: var(--sp-text); font: inherit; font-size: 16px; padding-inline: 48px 16px; transition: border-color .2s, box-shadow .2s; }
.ti-search input::placeholder { color: var(--sp-dim); }
.ti-search input:focus { outline: none; border-color: var(--sp-brand); box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
/* Under the search: the kinds as a segmented control (live counts) and, on the same row at the end, the platforms. */
.ti-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block: 16px 24px; }
.ti-seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--sp-line2); background: var(--sp-surface); scrollbar-width: none; }
.ti-seg::-webkit-scrollbar { display: none; }
.ti-seg button { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--sp-muted); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.ti-seg button small { color: var(--sp-dim); font-size: 12px; font-weight: 500; }
.ti-seg button[aria-pressed="true"] { background: #232830; color: var(--sp-text); }
.ti-seg button[aria-pressed="true"] small { color: var(--sp-muted); }
.ti-seg button.is-empty:not([aria-pressed="true"]) { color: var(--sp-dim); }
.ti-plats { display: flex; flex-wrap: wrap; gap: 4px; border-radius: 10px; }
.ti-plats button { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sp-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.ti-plats button:hover { color: var(--sp-text); }
.ti-plats button[aria-pressed="true"] { background: var(--sp-raised); color: var(--sp-text); }
.ti-tone--ps { --ti-tone: var(--sp-ps); }
.ti-tone--ps4 { --ti-tone: var(--ti-ps4); }
.ti-tone--nin { --ti-tone: var(--sp-nin); }
.ti-tone--xb { --ti-tone: var(--sp-xb); }
/* Cards stay about the listing's width (~235-250px next to the 270px side panel): wide screens get more columns, never
   bigger cards. The HTML has 12 (two rows at 6); the extras a width does not show are hidden, so no row ends half empty. */
.ti-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ti-grid > :nth-child(n+9) { display: none; }
@media (min-width: 1600px) { .ti-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ti-grid > :nth-child(n+9) { display: grid; } .ti-grid > :nth-child(n+11) { display: none; } }
@media (min-width: 1900px) { .ti-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ti-grid > :nth-child(n+11) { display: grid; } }
.ti-results.is-loading { opacity: .55; transition: opacity .2s; }

/* The cards: the .g2-lcard look - a surface card, a square cover with the blurred art behind, the title (2 lines), the
   platform small and muted with the price. Picked: a lime outline and a lime tick at the top end. */
.ti-item { position: relative; display: grid; gap: 8px; align-content: start; padding: 6px 6px 12px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-line); text-align: start; color: inherit; font: inherit; cursor: pointer; transition: border-color .2s, transform .25s var(--sp-ease), box-shadow .2s; }
.ti-item:hover { transform: translateY(-2px); border-color: #2e333b; }
.ti-item.is-in { border-color: var(--sp-lime); box-shadow: inset 0 0 0 1px var(--sp-lime); }
.ti-item.is-enter { animation: ti-tile .5s var(--sp-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
@keyframes ti-tile { from { opacity: 0; transform: translateY(8px); } }
.ti-mark { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sp-lime); color: var(--sp-on-lime); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--sp-ease); }
.ti-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ti-item.is-in .ti-mark { opacity: 1; transform: none; }
.ti-qb-tag { padding: 0 6px; margin-top: -4px; font-size: 11.5px; color: var(--sp-muted); }

/* Cover box: a blurred copy behind, the real art contained on top (CLAUDE.md "Cover art"). */
.ti-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #101318; }
.ti-art img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 10%; transition: transform .5s var(--sp-ease); }
.ti-art img.ti-art__blur { object-fit: cover; padding: 0; filter: blur(24px) saturate(1.1); opacity: .35; transform: scale(1.2); }
.ti-art::after { content: ""; position: absolute; inset: 0; background: rgba(11, 13, 16, .35); pointer-events: none; }
.ti-art img:not(.ti-art__blur), .ti-art .ti-art__fallback, .ti-art .ti-full-ov { z-index: 1; }
.ti-item:hover .ti-art img:not(.ti-art__blur) { transform: scale(1.03); }
.ti-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.34em * 2); min-height: calc(1.34em * 2); padding: 0 6px; color: var(--sp-text); font-weight: 600; font-size: 13.5px; line-height: 1.34; }
.ti-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 6px; font-size: 12px; color: var(--sp-dim); }
.ti-price { color: var(--sp-text); font-weight: 700; font-size: 15px; white-space: nowrap; }
.ti-price small { color: var(--sp-muted); font-weight: 500; font-size: 10.5px; margin-inline-end: 3px; }
.ti-price s { color: var(--sp-dim); font-weight: 500; font-size: 11.5px; margin-inline-end: 4px; }
/* We already hold enough of it (search results only, last): the cover dimmed with a label on it; it cannot be picked. */
.ti-item.is-full { cursor: not-allowed; }
.ti-item.is-full:hover { transform: none; border-color: var(--sp-line); }
.ti-item.is-full .ti-art img, .ti-item.is-full .ti-art__fallback { filter: saturate(.25) brightness(.55); }
.ti-item.is-full b { color: var(--sp-muted); }
.ti-full-ov { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 10px; text-align: center; }
.ti-full-ov span { padding: 6px 10px; border-radius: 10px; background: rgba(11, 13, 16, .85); border: 1px solid var(--sp-line2); color: var(--sp-text); font-size: 11.5px; line-height: 1.35; }
.ti-price--off { color: var(--sp-dim); font-weight: 600; font-size: 12.5px; }
/* No real image: a designed cover in the platform tone, its platform tag and the title. */
.ti-art__fallback { position: absolute; inset: 0; display: grid; justify-items: start; align-content: end; gap: 6px; padding: 12px; text-align: start; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--ti-tone, var(--sp-muted)) 42%, transparent), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--ti-tone, #3a4049) 55%, #0e1014), #0e1014 78%); color: #fff; }
.ti-art__fallback i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); color: #fff; }
.ti-art__fallback b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: none; min-height: 0; padding: 0; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ti-ck .ti-art__fallback b { font-size: 11px; -webkit-line-clamp: 2; }
/* Paging: the cards fade out (150 ms), the new ones fade in one after another (30 ms apart, 250 ms each). */
.ti-results.is-leaving .ti-grid { opacity: 0; transition: opacity .15s; }
.ti-item.is-page-in { animation: ti-page-in .25s var(--sp-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes ti-page-in { from { opacity: 0; transform: translateY(6px); } }
.ti-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; }
.ti-pager__nums { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ti-pager button { min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--sp-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.ti-pager__step { font-size: 18px !important; }
.ti-pager button:hover:not(:disabled) { background: var(--sp-raised); color: var(--sp-text); }
.ti-pager button[aria-current="page"] { background: #232830; color: var(--sp-text); }
.ti-pager button:disabled { opacity: .35; cursor: default; }
.sp--tradein[dir="rtl"] .ti-pager__step { transform: scaleX(-1); }
.ti-pager__gap { color: var(--sp-dim); padding: 0 2px; }
.ti-page-error { display: grid; justify-items: center; gap: 12px; }
/* The page's small toast. */
.ti-toast { position: fixed; z-index: 3000; inset-inline: 16px; bottom: calc(var(--ti-dock-h, 72px) + 40px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin-inline: auto; padding: 12px 16px; border-radius: 14px; background: #22262d; border: 1px solid #343a43; color: var(--sp-text); font-size: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s var(--sp-ease); }
.ti-toast.is-on { opacity: 1; transform: none; }
.ti-nothing { padding: 24px; text-align: center; border: 1px dashed var(--sp-line2); border-radius: 16px; color: var(--sp-muted); font-size: 14px; }

/* Your items (desktop): a sticky side panel - the list, "Up to", Next. */
.ti-side { display: none; }
@media (min-width: 992px) {
    .ti-shelf { grid-template-columns: minmax(0, 1fr) 270px; }
    .ti-side { position: sticky; top: calc(var(--ti-stepper-h, 72px) + 16px); display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--sp-surface); border: 1px solid var(--sp-line); }
    /* The floating dock is not shown over the cards on desktop: the side panel does its job in step 1. */
    .sp--tradein.is-pick .ti-dock { display: none; }
}
.ti-side h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 15px; color: var(--sp-text); }
.ti-side h3 small { color: var(--sp-dim); font-size: 12px; font-weight: 500; }
.ti-side__list { display: grid; gap: 8px; max-height: 320px; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: #343a43 transparent; }
.ti-side__list:empty { display: none; }
.ti-side__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ti-side__list .ti-thumb { width: 36px; height: 36px; border-radius: 8px; }
.ti-side__t { min-width: 0; }
.ti-side__t b { display: block; overflow: hidden; color: var(--sp-text); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ti-side__t small { color: var(--sp-dim); font-size: 12px; }
.ti-side__list .ti-x { width: 24px; height: 24px; border-color: transparent; background: transparent; color: var(--sp-dim); font-size: 16px; }
.ti-side__empty { margin: 0; padding: 16px 8px; border: 1px dashed var(--sp-line2); border-radius: 12px; color: var(--sp-dim); font-size: 12.5px; text-align: center; }
.ti-side__tot { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--sp-line); }
.ti-side__tot span { color: var(--sp-muted); font-size: 12.5px; }
.ti-side__tot b { color: var(--sp-text); font-size: 22px; font-weight: 800; }
.ti-side .sp-btn { width: 100%; }

/* The bottom dock: count, running total, Back / Next */
/* The dock stands out from whatever is behind it: a raised solid surface, a neutral edge and a deep shadow (round 9: no lime edge). */
.ti-dock { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 6; margin-top: calc(-1 * (var(--ti-dock-h, 72px) + 24px)); display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 12px; padding-inline-start: 14px; border-radius: 20px; background: #1f242b; border: 1px solid #343a43; box-shadow: 0 24px 54px -10px rgba(0, 0, 0, .92), 0 0 0 1px rgba(0, 0, 0, .55); transition: box-shadow .4s, border-color .4s; }
/* Everything is ready to send: the dock warms (soft lime glow) and both Send buttons pulse gently. */
.ti-dock.is-ready { border-color: rgba(188, 215, 103, .6); box-shadow: inset 0 1px 0 rgba(188, 215, 103, .35), 0 0 0 1px rgba(188, 215, 103, .25), 0 0 34px -6px rgba(188, 215, 103, .45), 0 22px 50px -12px rgba(0, 0, 0, .9); }
.sp-btn.is-pulse { animation: ti-pulse 2.2s ease-in-out infinite; }
@keyframes ti-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* Not ready yet: still looks like a button (a click shows what is missing), only a little quieter. */
.sp-btn--primary.is-waiting { opacity: .78; }
.ti-dock-sum { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.ti-dock-count { width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; background: var(--sp-lime); color: var(--sp-on-lime); font: inherit; font-weight: 800; font-size: 16px; flex: 0 0 auto; cursor: pointer; }
.ti-dock-count:focus-visible { outline: 2px solid var(--sp-lime); outline-offset: 3px; }
/* The dock's Next once the step is ready: a slow lime ring (2.4 s) until it is pressed. */
.sp-btn.is-ready-pulse { animation: ti-ready 2.4s ease-in-out infinite; }
@keyframes ti-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(188, 215, 103, 0); } 50% { box-shadow: 0 0 0 7px rgba(188, 215, 103, .16), 0 0 22px rgba(188, 215, 103, .25); } }
.ti-dock .sp-btn.is-off { display: none; }
.ti-dock .ti-short { display: none; }
/* Thumbnails and the small × (the side panel, the picked items sheet). */
.ti-thumb { display: block; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--sp-deep); border: 1px solid var(--sp-line2); }
.ti-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.ti-thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--ti-tone, var(--sp-muted)) 70%, #000), #0e1014); }
.ti-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid #3a4049; border-radius: 50%; background: #2a2f37; color: var(--sp-text); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.ti-x:hover, .ti-x:focus-visible { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }
/* The chat bubble and back-to-top sit above the dock while it shows (trade_in.js sets --ti-dock-lift on body). */
body.ti-dock-shown #chat_with_us { bottom: var(--ti-dock-lift, 96px) !important; }
body.ti-dock-shown #scrollToTopBtn { bottom: calc(var(--ti-dock-lift, 96px) + var(--g2-chat-h, 56px) + 12px) !important; }
.ti-dock-count.is-bump { animation: ti-bump .35s var(--sp-ease); }
@keyframes ti-bump { 50% { transform: scale(1.18); } }
.ti-dock-text { min-width: 0; cursor: default; }
.ti-dock-text b { display: block; color: var(--sp-text); font-size: 15px; white-space: nowrap; }
.ti-dock-text span { display: block; font-size: 12px; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-dock-btns { display: flex; gap: 8px; flex: 0 0 auto; }

/* Step 2 (round 9): one card per item - the photo, the title and the questions, a price box at the end. No coloured
   edges: the answers and the price box carry the meaning (gold = a reason that changes the price, red = refused). */
.ti-lead { margin: -12px 0 24px; color: var(--sp-muted); font-size: 13.5px; max-width: 70ch; }
.ti-checklist { display: grid; gap: 16px; }
.ti-none-wrap:empty { display: none; }
.ti-none-catch { justify-self: start; }
.ti-ck { display: grid; grid-template-columns: 120px minmax(0, 1fr) 190px; grid-template-areas: "pic head box" "pic qs box"; grid-template-rows: auto 1fr; gap: 12px 24px; align-items: start; padding: 16px; }
.ti-ck__pic { grid-area: pic; aspect-ratio: 1; }
.ti-ck__layer { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transition: opacity .3s ease; }
.ti-ck__layer--only, .ti-ck__pic.is-only .ti-ck__layer--full { opacity: 0; }
.ti-ck__pic.is-only .ti-ck__layer--only { opacity: 1; }
.ti-ck__head { grid-area: head; display: grid; gap: 4px; min-width: 0; }
.ti-ck__head h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.ti-ck-sub { font-size: 12.5px; color: var(--sp-dim); }
.ti-qs { grid-area: qs; display: grid; gap: 8px; min-width: 0; }
.ti-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sp-line); transition: border-color .4s, background-color .4s; }
.ti-q > span { font-size: 14px; color: var(--sp-text); }
.ti-q small { display: block; font-size: 12px; color: var(--sp-dim); }
/* The guide light: the next unanswered question only - a soft lime outline that fades in once and stays still. */
.ti-q.is-cur { border-color: rgba(188, 215, 103, .55); background: rgba(188, 215, 103, .04); }
.ti-yn { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--sp-line2); }
.ti-yn button { border: 0; background: none; color: var(--sp-muted); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.ti-yn button[aria-pressed="true"] { background: var(--sp-text); color: #0b0d10; }
.ti-q.is-bad .ti-yn button[aria-pressed="true"] { background: var(--sp-red); color: #fff; }
/* The price box: "We pay" and the price (28px / 800), one gold line why, a small muted status; refused = red text. */
.ti-pbox { grid-area: box; display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 14px; background: var(--sp-raised); text-align: end; }
.ti-pbox small { color: var(--sp-muted); font-size: 12px; }
.ti-pbox b { color: var(--sp-text); font-size: 28px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; transition: color .4s; }
.ti-pbox b.is-chg { color: var(--sp-lime); }
.ti-pbox em { min-height: 1.4em; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--sp-gold); }
.ti-pbox em:empty { min-height: 0; }
.ti-pbox__status { color: var(--sp-dim); font-size: 12px; }
.ti-pbox.is-no small, .ti-pbox.is-no .ti-pbox__status { display: none; }
.ti-pbox.is-no b { color: var(--sp-red); font-size: 18px; direction: inherit; }
.ti-pbox.is-no em { color: #f2a59f; }
.ti-ar { font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif !important; }

/* The disc guide banner (when the tray holds a game) */
.ti-disc-guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px; margin-bottom: 24px; border-radius: 18px; border: 1px solid var(--sp-line); background: var(--sp-surface); animation: ti-enter .6s var(--sp-ease) both; }
/* The laser view (the disc check page's lab, in CSS): one 3.5 s cycle. The scratch sits at 12 o'clock and reaches the
   laser (3 o'clock) a quarter of the way through; the read line dips at that moment and the label reads "Read error". */
.ti-scope { display: grid; gap: 8px; direction: ltr; }
.ti-scope-stage { position: relative; width: 128px; height: 128px; margin-inline: auto; }
.ti-scope-disc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #d9e2f0, #f3c6e6, #c7f0e0, #f0e7b8, #c6d8f6, #e9c9f1, #d9e2f0); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(255, 255, 255, .25); animation: ti-spin 3.5s linear infinite; }
.ti-scope-scratch { position: absolute; left: 49%; top: 7%; width: 3px; height: 26%; border-radius: 2px; background: #5a1d1d; box-shadow: 0 0 3px rgba(255, 80, 80, .6); transform: rotate(14deg); }
.ti-scope-hole { position: absolute; inset: 42%; border-radius: 50%; background: var(--sp-surface); box-shadow: 0 0 0 9px rgba(255, 255, 255, .3); }
.ti-scope-laser { position: absolute; right: 6%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--sp-lime); box-shadow: 0 0 10px 2px rgba(188, 215, 103, .7); animation: ti-laser 3.5s linear infinite; }
@keyframes ti-laser { 0%, 20%, 42%, 100% { background: var(--sp-lime); box-shadow: 0 0 10px 2px rgba(188, 215, 103, .7); } 24%, 38% { background: var(--sp-red); box-shadow: 0 0 12px 3px rgba(255, 90, 95, .75); } }
.ti-sig { position: relative; height: 40px; overflow: hidden; border-radius: 8px; background: #0c0f12; border: 1px solid var(--sp-line); color: var(--sp-lime); }
.ti-sig svg { position: absolute; inset: 0; width: 200%; height: 100%; animation: ti-scan 3.5s linear infinite; }
@keyframes ti-scan { to { transform: translateX(-50%); } }
.ti-sig-l { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--sp-dim); }
.ti-sig-l b { position: relative; font-weight: 600; }
.ti-sig-ok { color: var(--sp-lime); animation: ti-sig-ok 3.5s linear infinite; }
.ti-sig-err { position: absolute; inset-inline-end: 0; top: 0; white-space: nowrap; color: var(--sp-red); opacity: 0; animation: ti-sig-err 3.5s linear infinite; }
@keyframes ti-sig-ok { 0%, 22%, 42%, 100% { opacity: 1; } 24%, 40% { opacity: 0; } }
@keyframes ti-sig-err { 0%, 22%, 42%, 100% { opacity: 0; } 24%, 40% { opacity: 1; } }
/* "Open the 30-second disc guide" (round 9): no looping halo any more - in step 2 only the next question is lit. */
.sp-btn.ti-halo { position: relative; }
.sp-btn.ti-halo::after { content: none; }
.ti-dg-body { display: grid; gap: 10px; }
.ti-dg-body h3 { font-size: clamp(17px, 2vw, 21px); }
.ti-dg-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ti-dg-rules li { position: relative; padding-inline-start: 19px; }
.ti-dg-rules i { position: absolute; inset-inline-start: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ti-tone); }
.ti-dg-rules b { color: var(--sp-text); }
.ti-dg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Step 3: the offer */
.ti-offer, .ti-confirm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.ti-offer > *, .ti-confirm > *, .ti-line > span { min-width: 0; }
.ti-total-card { padding: 22px; display: grid; gap: 16px; }
.ti-total-label { font-size: 12px; color: var(--sp-muted); letter-spacing: .1em; text-transform: uppercase; }
.sp--tradein[dir="rtl"] .ti-total-label { letter-spacing: 0; }
.ti-total { font-size: clamp(40px, 6vw, 56px); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; direction: ltr; unicode-bidi: isolate; text-align: start; }
.sp--tradein[dir="rtl"] .ti-total { text-align: end; }
.ti-total small { font-size: 15px; color: var(--sp-muted); font-weight: 500; margin-inline-end: 8px; letter-spacing: 0; }
.ti-same { font-size: 13.5px; color: var(--sp-muted); }
.ti-same b { color: var(--sp-text); }
/* The lines (round 9): calm rows on hairlines, no verdict chips; a console-only row says so in small muted text, a refused
   one in small red and its price struck. */
.ti-lines { display: grid; }
.ti-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--sp-line); font-size: 13.5px; }
.ti-line:first-child { border-top: 0; }
.ti-line b { color: var(--sp-text); font-weight: 500; }
.ti-line > .sp-num { color: var(--sp-text); font-weight: 600; }
.ti-line__note { display: block; margin-top: 2px; color: var(--sp-dim); font-size: 12px; }
.ti-line__note--no { color: #f2a59f; }
.ti-line em.ti-qb { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--sp-muted); }
.ti-line.is-out b, .ti-line.is-out > .sp-num { color: var(--sp-dim); }
.ti-line.is-out > .sp-num { text-decoration: line-through; }
/* "How we price" (round 9): plain text - a heading and a paragraph, no border, background or boxes. */
.ti-howprice { display: grid; gap: 8px; align-content: start; padding: 8px 0; }
.ti-howprice h3 { margin: 0; font-size: 16px; color: var(--sp-text); }
.ti-howprice p { margin: 0; font-size: 14px; color: var(--sp-muted); max-width: 60ch; }
/* After the offer: a link to the used games hub (/used-games). */
.ti-shopused { margin: 16px 0 0; font-size: 14px; }
.ti-shopused a { color: #bcd767 !important; font-weight: 600; text-decoration: none; }
.ti-shopused a:hover { text-decoration: underline; }

/* Step 4: how to sell, store / home, recap, confirmations */
.ti-how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The two ways (round 9): icon, title and tag on ONE line (the tag at the end), the description under them, Choose /
   Chosen under that at the start - a grid, nothing absolutely placed, so nothing can overlap at any width. */
.ti-how-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 4px; align-items: center; text-align: start; padding: 16px; border-radius: 16px; border: 1px solid var(--sp-line2); background: var(--sp-surface); color: inherit; font: inherit; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s var(--sp-ease); }
.ti-how-opt:hover { transform: translateY(-2px); border-color: #3a4049; }
.ti-how-ic { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #232830; color: var(--sp-text); transition: background-color .25s, color .25s; }
.ti-how-ic svg { width: 20px; height: 20px; }
.ti-how-opt b { grid-column: 2; grid-row: 1; min-width: 0; font-size: 15px; color: var(--sp-text); }
.ti-how-opt em { grid-column: 3; grid-row: 1; justify-self: end; font-style: normal; font-size: 12px; font-weight: 600; color: var(--sp-body); white-space: nowrap; }
.ti-how-opt small { grid-column: 2 / 4; grid-row: 2; font-size: 13px; color: var(--sp-muted); line-height: 1.5; }
.ti-how-opt::after { content: attr(data-choose); grid-column: 2 / 4; grid-row: 3; justify-self: start; margin-top: 8px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--sp-line2); font-size: 12.5px; font-weight: 600; color: var(--sp-text); transition: background-color .25s, color .25s, border-color .25s; }
.ti-how-opt:hover::after { background: var(--sp-raised); }
.ti-how-opt[aria-checked="true"] { border-color: var(--sp-lime); box-shadow: inset 0 0 0 1px var(--sp-lime); }
.ti-how-opt[aria-checked="true"] .ti-how-ic { background: var(--sp-lime); color: var(--sp-on-lime); }
.ti-how-opt[aria-checked="true"]::after { content: attr(data-chosen); background: var(--sp-lime); color: var(--sp-on-lime); border-color: var(--sp-lime); }
.ti-how-opt:disabled { cursor: not-allowed; opacity: .55; transform: none; }
/* No choice 5 s after the step opens: the two cards glow twice, then stay still. */
.ti-how.is-nudge .ti-how-opt { animation: ti-nudge 2.8s var(--sp-ease) 2; }
.ti-how.is-nudge .ti-how-opt + .ti-how-opt { animation-delay: .5s; }
@keyframes ti-nudge { 0%, 100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 1px rgba(188, 215, 103, .45); } }
.ti-sub { margin-top: 32px; display: grid; gap: 12px; animation: ti-enter .45s var(--sp-ease) both; }
.ti-sub h3 { margin: 0; font-size: 15px; color: var(--sp-text); font-weight: 600; }
/* Stores and addresses: the same calm cards; selected = a lime outline. */
.ti-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ti-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; text-align: start; padding: 14px 16px; border-radius: 14px; background: var(--sp-surface); border: 1px solid var(--sp-line2); color: inherit; cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .2s; }
.ti-pick:hover:not(:disabled) { border-color: #3a4049; }
.ti-pick > i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sp-line2); margin-top: 2px; transition: border-color .2s, background-color .2s; }
.ti-pick b { display: block; color: var(--sp-text); font-weight: 500; font-size: 14px; }
.ti-pick > span > span { display: block; font-size: 12.5px; color: var(--sp-muted); margin-top: 4px; }
.ti-pick .ti-open { color: var(--sp-body); }
.ti-pick .ti-closed { color: var(--sp-dim); }
.ti-pick .ti-nocover { color: #f2a59f; }
.ti-pick[aria-checked="true"] { border-color: var(--sp-lime); box-shadow: inset 0 0 0 1px var(--sp-lime); }
.ti-pick[aria-checked="true"] > i { border-color: var(--sp-lime); background: radial-gradient(circle, var(--sp-lime) 0 42%, transparent 48%); }
.ti-pick:disabled { cursor: not-allowed; opacity: .7; }
.ti-pick--new, .ti-pick--new > i { border-style: dashed; }
.ti-fine { font-size: 12.5px; color: var(--sp-muted); }
.ti-fine b { color: var(--sp-text); font-weight: 500; }
.ti-recap, .ti-oaths { padding: 20px; display: grid; gap: 12px; }
.ti-recap-sum { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sp-line); }
.ti-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ti-row span { color: var(--sp-muted); }
.ti-row b { color: var(--sp-text); font-weight: 600; }
.ti-row--pay { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--sp-line); font-size: 16px; }
.ti-row--pay b { color: #fff; font-size: 18px; font-weight: 800; }
.ti-oaths h3 { font-size: 17px; }
.ti-oath-list { display: grid; gap: 8px; }
/* The two confirmations: tick cards styled like the how-to-sell options, a clear lime tick when chosen. */
.ti-tick { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; text-align: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sp-line2); background: var(--sp-surface); color: var(--sp-body); font: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s var(--sp-ease); }
.ti-tick:hover { transform: translateY(-1px); border-color: #3a4049; }
.ti-tick > i { position: relative; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--sp-line2); background: var(--sp-deep); transition: background-color .2s, border-color .2s; }
.ti-tick > i::after { content: ""; position: absolute; inset: 5px 7px 8px; border: solid var(--sp-on-lime); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform .25s var(--sp-ease); }
.ti-tick[aria-checked="true"] { border-color: var(--sp-lime); box-shadow: inset 0 0 0 1px var(--sp-lime); color: var(--sp-text); }
.ti-tick[aria-checked="true"] > i { background: var(--sp-lime); border-color: var(--sp-lime); }
.ti-tick[aria-checked="true"] > i::after { transform: rotate(45deg) scale(1); }
.ti-btn-wide { width: 100%; min-height: 52px; font-size: 15.5px; }
.ti-unavailable { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--sp-line2); color: var(--sp-muted); font-size: 13.5px; }
/* Address cards: area and city as the title, the address type as a small chip. */
.ti-addr-type { display: inline-block; vertical-align: 1px; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--sp-muted); background: var(--sp-deep); border: 1px solid var(--sp-line2); }
/* Calm hints (step 1, round 9): ONE element lit - a soft lime outline that fades in once and then stays still (no
   breathing, no flashing); trade_in.js moves it only after the visitor acts. */
/* An outline, not a pseudo-element: the kind tabs scroll sideways on phones and would clip anything drawn outside them. */.ti-hint { outline: 1.5px solid rgba(188, 215, 103, .5); outline-offset: 4px; animation: ti-hint-in .6s ease-out both; }@keyframes ti-hint-in { from { outline-color: transparent; } }
.ti-hint { outline: 1.5px solid rgba(188, 215, 103, .5); outline-offset: 4px; animation: ti-hint-in .6s ease-out both; }
@keyframes ti-hint-in { from { outline-color: transparent; } }

/* Sheets (<dialog>): a bottom sheet on phones, a centred card on wider screens. */
.ti-sheet { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); margin: auto; padding: 0; border: 1px solid #343a43; border-radius: 22px; background: #1a1e24; color: var(--sp-body); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .95); overflow: hidden; overscroll-behavior: contain; }
.ti-sheet[open] { display: flex; flex-direction: column; animation: ti-sheet-in .28s var(--sp-ease); }
.ti-sheet::backdrop { background: rgba(5, 6, 8, .72); }
@keyframes ti-sheet-in { from { opacity: 0; transform: translateY(16px); } }
.ti-sheet__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sp-line); }
.ti-sheet__head h2 { flex: 1 1 auto; margin: 0; font-size: 17px; color: var(--sp-text); }
.ti-sheet__x { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--sp-line2); border-radius: 50%; background: var(--sp-deep); color: var(--sp-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.ti-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--sp-line); }
.ti-sheet__foot:empty { display: none; }
.ti-sheet__foot > span { color: var(--sp-muted); font-size: 13px; }
.ti-sheet__foot > b { color: var(--sp-text); }
.ti-tray-list { list-style: none; margin: 0; padding: 8px 18px; overflow-y: auto; display: grid; gap: 4px; }
.ti-tray-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sp-line); }
.ti-tray-list li:last-child { border-bottom: 0; }
.ti-tray-list__t { min-width: 0; }
.ti-tray-list__t b { display: block; color: var(--sp-text); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-tray-list__t small { color: var(--sp-muted); font-size: 12px; }
.ti-tray-list .ti-x { width: 28px; height: 28px; font-size: 15px; }
.ti-tray-list__empty { display: block !important; color: var(--sp-muted); text-align: center; }
.sp--tradein > .ti-sheet { position: fixed; }

/* Steps 2-4 (trade_in.js setFocus): the task only. The promises, the SEO text and the FAQ hide (still in the HTML) and
   the hero becomes a slim title row; its art keeps animating, just small. */
.sp--tradein.is-focus .ti-after,
.sp--tradein.is-focus .ti-seo { display: none; }
.sp--tradein.is-focus .ti-hero { grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; padding-block: 2px 8px; }
.sp--tradein.is-focus .ti-hero h1 { font-size: 24px; }
.sp--tradein.is-focus .ti-hero__txt .sp-eyebrow, .sp--tradein.is-focus .ti-hero p { display: none; }
.sp--tradein.is-focus .ti-hero-art { height: 60px; transform: scale(.42); transform-origin: center; }
/* Fast clicks never select text on the controls. */
.sp--tradein :is(.ti-stepper, .ti-dock, .ti-hero, .ti-how, .ti-filters, .ti-item, .ti-pager, .ti-side, .ti-yn, .ti-pbox) { -webkit-user-select: none; user-select: none; }
/* "Did you check your discs?" */
.ti-sheet--ask { padding: 22px 22px 0; width: min(440px, calc(100vw - 32px)); }
.ti-sheet--ask[open] { gap: 10px; }
.ti-sheet--ask h2 { margin: 0; font-size: 19px; color: var(--sp-text); }
.ti-sheet--ask p { color: var(--sp-muted); font-size: 14px; }
.ti-sheet--ask .ti-sheet__foot { margin: 6px -22px 0; justify-content: flex-start; }
.ti-ask-eyebrow { color: var(--sp-gold); }
@media (max-width: 640px) {
    .ti-sheet { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .ti-sheet--ask { padding: 20px 18px 0; }
    .ti-sheet--ask .ti-sheet__foot { margin-inline: -18px; }
    .ti-sheet--ask .sp-btn { flex: 1 1 100%; }
}

/* Done: what to bring, and the hotline. */
.ti-done-prep { display: grid; gap: 4px; }
.ti-done-prep p { margin: 0; font-size: 14px; color: var(--sp-text) !important; }
.ti-done-help { font-size: 14px; }
.ti-done-help a { color: var(--sp-lime) !important; font-weight: 700; }

/* Below the tool: three promises, then the SEO block */
.ti-after { padding-block: 48px 48px; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ti-after > div { padding: 16px 0 0; display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--sp-line); }
.ti-after h3 { font-size: 16px; }
.ti-after p { font-size: 13.5px; color: var(--sp-muted); max-width: 60ch; }
.ti-after .ti-k { font-family: var(--sp-mono); font-size: 12px; color: var(--sp-dim); }
.ti-seo { padding-block: 0 48px; display: grid; gap: 24px; }
.ti-seo h2 { font-size: 24px; max-width: 44ch; }
.ti-seo-intro { color: var(--sp-muted); font-size: 14.5px; max-width: 70ch; }
.ti-we-buy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.ti-wb { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-line); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: transform .3s var(--sp-ease), border-color .3s, box-shadow .3s; }
.ti-wb:hover { transform: translateY(-2px); border-color: #3a4049; }
.ti-wb-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ti-tone, var(--sp-lime)) 14%, var(--sp-deep)); color: var(--ti-tone, var(--sp-lime)); }
.ti-wb-ic svg { width: 30px; height: 22px; }
.ti-wb-ic .ti-spin { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #9fb6c9); animation: ti-spin 3s linear infinite; display: block; }
.ti-wb b { display: block; color: var(--sp-text); font-size: 14.5px; font-weight: 600; }
.ti-wb small { color: var(--sp-muted); font-size: 12.5px; }
.ti-wb small .sp-num { color: var(--sp-text); }
.ti-wb > i { font-style: normal; font-size: 22px; color: var(--sp-dim); transition: transform .3s var(--sp-ease); }
.sp--tradein[dir="rtl"] .ti-wb > i { transform: scaleX(-1); }
.ti-wb:hover > i { transform: translateX(calc(3px * var(--ti-dir))); }
.sp--tradein[dir="rtl"] .ti-wb:hover > i { transform: scaleX(-1) translateX(3px); }
.ti-faq { display: grid; gap: 8px; margin-top: 24px; }
.ti-faq h3 { font-size: 17px; margin-bottom: 4px; }
.ti-faq details { border-bottom: 1px solid var(--sp-line); padding: 4px 0; }
.ti-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; color: var(--sp-text); font-size: 15px; font-weight: 500; }
.ti-faq summary::-webkit-details-marker { display: none; }
.ti-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--sp-muted); font-size: 20px; line-height: 1; transition: transform .35s var(--sp-ease); }
.ti-faq details[open] summary::after { transform: rotate(45deg); }
.ti-faq details p { padding: 10px 2px 12px; color: var(--sp-muted); font-size: 14px; max-width: 70ch; }

/* Done screen (SellRequests/Done) */
.ti-done { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 32px 0 48px; max-width: 640px; margin-inline: auto; }
.ti-done-tick { width: 84px; height: 84px; color: var(--sp-lime); filter: drop-shadow(0 0 24px rgba(188, 215, 103, .35)); }
.ti-done-tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ti-draw 1s var(--sp-ease) forwards; }
.ti-done-tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ti-draw .6s .7s var(--sp-ease) forwards; }
@keyframes ti-draw { to { stroke-dashoffset: 0; } }
.ti-done h1 { margin: 0; font-size: 32px; }
@media (max-width: 575px) { .ti-done h1 { font-size: 24px; } }
.ti-done p { margin: 0; color: var(--sp-body); font-size: 15px; max-width: 52ch; }
.ti-next-steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; width: 100%; text-align: start; counter-reset: ti-ns; }
.ti-next-steps li { counter-increment: ti-ns; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; color: var(--sp-body); }
.ti-next-steps li::before { content: counter(ti-ns); font-weight: 700; font-size: 13px; color: var(--sp-muted); text-align: center; }
.ti-done-nos { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 4px 0 6px; }
.ti-done-no { display: grid; gap: 4px; min-width: 200px; padding: 16px 24px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-line); text-align: center; animation: ti-enter .6s var(--sp-ease) both; }
.ti-done-no + .ti-done-no { animation-delay: .25s; }
.ti-done-no small { font-size: 12px; color: var(--sp-muted); }
.ti-done-no b { font-size: 22px; color: var(--sp-text); }
.ti-done-no span { font-size: 12.5px; color: var(--sp-muted); }
.ti-done-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* The beam: one slow light that travels through a row of things. The page's script sets --lit (0..1, how much light is
   on the element) and --sx (where the light is, -1..1); the light itself moves by background-position. */
.ti-beam {
    --lit: 0;
    --sx: 0;
    background-image: linear-gradient(100deg, transparent 32%, rgba(236, 248, 196, calc(var(--lit) * .30)) 50%, transparent 68%), linear-gradient(rgba(188, 215, 103, calc(var(--lit) * .22)), rgba(188, 215, 103, calc(var(--lit) * .22))) !important;
    background-size: 300% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: calc(50% - var(--sx) * 50%) 0, 0 0 !important;
    border-color: rgba(188, 215, 103, calc(.15 + var(--lit) * .55)) !important;
    box-shadow: 0 0 calc(var(--lit) * 36px) calc(var(--lit) * -6px) rgba(188, 215, 103, calc(var(--lit) * .5));
}

.ti-beam.ti-chip:not([aria-pressed="true"]), .ti-beam b { color: color-mix(in srgb, #f6fbe4 calc(var(--lit) * 100%), var(--sp-muted)); }
.ti-steps .ti-beam .ti-n { background-color: rgba(188, 215, 103, calc(var(--lit) * .9)); color: color-mix(in srgb, var(--sp-on-lime) calc(var(--lit) * 100%), var(--sp-muted)); border-color: rgba(188, 215, 103, calc(var(--lit))); box-shadow: 0 0 calc(var(--lit) * 18px) rgba(188, 215, 103, calc(var(--lit) * .6)); }
.ti-steps .ti-beam.is-on .ti-n { background-color: var(--sp-lime); color: var(--sp-on-lime); }
.ti-steps .ti-beam.is-on b { color: var(--sp-text); }
.ti-search.ti-beam { background: none !important; box-shadow: none; }
.ti-search.ti-beam input { border-color: rgba(188, 215, 103, calc(.2 + var(--lit) * .6)); box-shadow: 0 0 calc(var(--lit) * 40px) calc(var(--lit) * -8px) rgba(188, 215, 103, calc(var(--lit) * .55)), inset 0 0 calc(var(--lit) * 30px) rgba(188, 215, 103, calc(var(--lit) * .08)); }
.ti-ck.ti-beam { border-inline-start-color: rgba(188, 215, 103, calc(.3 + var(--lit) * .7)) !important; }

/* Guide lights: walk the eye through the page, one thing at a time */
.ti-g-host { position: relative; overflow: hidden; }
.ti-g-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, rgba(188, 215, 103, .05) 35%, rgba(220, 240, 160, .16) 50%, rgba(188, 215, 103, .05) 65%, transparent 80%); mix-blend-mode: screen; transform: translateX(calc(-120% * var(--ti-dir))); animation: ti-g-shine 1.6s cubic-bezier(.45, .05, .25, 1) forwards; }
@keyframes ti-g-shine { to { transform: translateX(calc(120% * var(--ti-dir))); } }
.ti-g-glow { animation: ti-g-glow 1.3s var(--sp-ease); }
@keyframes ti-g-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(188, 215, 103, 0); } 30% { box-shadow: 0 0 0 1px rgba(188, 215, 103, .75), 0 0 30px -6px rgba(188, 215, 103, .6); } }
.ti-g-text { background: linear-gradient(90deg, var(--sp-text) 0 30%, #eaf7c0 44%, #c6e070 50%, #eaf7c0 56%, var(--sp-text) 70% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ti-g-text 2.6s cubic-bezier(.45, 0, .55, 1) forwards; }
.sp--tradein[dir="rtl"] .ti-g-text { animation-name: ti-g-text-rtl; background-position: 0 0; }
@keyframes ti-g-text { to { background-position: 0 0; } }
@keyframes ti-g-text-rtl { to { background-position: 100% 0; } }
/* The trace: a light running once around the search box's border (a rotating layer inside a ring mask). */
.ti-g-trace { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 18px; padding: 1.5px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ti-g-trace::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(transparent 0 55%, rgba(188, 215, 103, .12) 72%, rgba(220, 240, 150, .7) 90%, transparent 100%); animation: ti-g-trace 3s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes ti-g-trace { 0% { transform: rotate(0); opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0; } }
.ti-g-pop { animation: ti-g-pop .6s var(--sp-ease); }
@keyframes ti-g-pop { 40% { opacity: .55; } }

@media (max-width: 900px) {
    .ti-offer, .ti-after, .ti-confirm { grid-template-columns: minmax(0, 1fr); }
}

/* Phones (round 9): no hero art, H1 24px, section titles 19px; the steps as one compact block; 2 cards a row. */
@media (max-width: 767px) {
    .ti-hero { grid-template-columns: minmax(0, 1fr); padding-block: 6px 12px; }
    .ti-hero-art { display: none; }
    .ti-hero h1, .sp--tradein.is-focus .ti-hero h1 { font-size: 24px; }
    .ti-head h2, .ti-seo h2 { font-size: 19px; }
    .sp--tradein .sp-crumbs ol { padding-top: 12px; }
    .ti-steps, .ti-track { display: none; }
    .ti-mstep { display: block; }
    .ti-panel { padding-top: 24px; }
    .ti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ti-grid > :nth-child(n+7) { display: none; }
    .ti-filters { margin-block: 12px 16px; }
    .ti-seg { width: 100%; }
    .ti-seg button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
}

@media (max-width: 640px) {
    /* Step 2: the photo and the title on top, the price box under the title, then the questions. */
    .ti-ck { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "pic head" "box box" "qs qs"; grid-template-rows: auto; gap: 12px; }
    .ti-pbox { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; padding: 12px 14px; text-align: start; }
    .ti-pbox b { grid-column: 2; grid-row: 1; justify-self: end; }
    .ti-pbox small { grid-column: 1; grid-row: 1; }
    .ti-pbox em, .ti-pbox__status { grid-column: 1 / -1; }
    .ti-pbox.is-no b { grid-column: 1 / -1; justify-self: start; }
    .ti-q { grid-template-columns: minmax(0, 1fr); }
    .ti-yn { justify-self: start; }
    .ti-dock { padding: 10px; gap: 8px; }
    /* Phones: the count (a tap opens the picked items sheet), "N items · EGP X" (also opens it), the button. */
    .ti-dock-text { cursor: pointer; }
    .ti-dock-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
    .ti-dock-text span { font-size: 11.5px; }
    .ti-dock .sp-btn { padding: 0 14px; }
    .ti-dock-btns .sp-btn--ghost { display: none; }
    .ti-dock .ti-long { display: none; }
    .ti-dock .ti-short { display: inline; }
    .ti-how { grid-template-columns: minmax(0, 1fr); }
    .ti-disc-guide { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .ti-scope { width: min(240px, 100%); }
    .ti-dg-rules li { text-align: start; }
    .ti-dg-btns { justify-content: center; }
    .ti-dg-btns .sp-btn { width: 100%; }
    .ti-disc-guide .sp-eyebrow { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sp--tradein::before, .ti-ring, .ti-ha, .ti-ha-disc i, .ti-spark, .ti-scope-disc, .ti-scope-laser, .ti-sig svg, .ti-sig-ok, .ti-sig-err, .ti-spin,
    .ti-item.is-page-in, .ti-item.is-enter, .sp-btn.is-ready-pulse, .ti-sheet[open], .ti-hint, .ti-how.is-nudge .ti-how-opt { animation: none !important; }
    .ti-ck__layer, .ti-pbox b, .ti-q, .ti-mark { transition: none !important; }
    .ti-g-shine, .ti-g-trace { display: none; }
    .ti-g-text { color: inherit; background: none; }
}

/* Text fields of the policy contents' find box and the 404 search. */
.sp-input {
    width: 100%;
    padding: 10px 16px;
    padding-inline-start: 38px;
    border: 1px solid var(--sp-line2);
    border-radius: 999px;
    background: var(--sp-field);
    color: var(--sp-text);
    font: inherit;
    font-size: 14px;
}

.sp-input { padding-inline-start: 16px; }
.sp-input::placeholder { color: var(--sp-dim); }
.sp-input:focus { outline: none; border-color: var(--sp-brand); box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }

/* ============================================================================================================
   DISC CHECK (.sp--disc)
   ============================================================================================================ */
.sp--disc .sp-hero { grid-template-columns: .9fr 1.1fr; padding-block: 26px 10px; }
/* Full site width: no inner cap on the FAQ (its answers keep the ch measure); the closing band pads like the page's
   other bands (.sp-same). */
.sp--disc .sp-faq { max-width: none; }
.sp--disc .sp-endband { margin-top: 16px; padding: 20px 22px; gap: 10px; }

.sp-lab { display: grid; gap: 16px; padding: clamp(16px, 2.6vw, 24px); }
.sp-lab__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-body); }
/* "Inside the console" / "Laser at": body text with a small live lime dot. */
.sp-lab__top > span { display: inline-flex; align-items: center; gap: 8px; }
.sp-lab__top > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-lime); box-shadow: 0 0 6px rgba(188, 215, 103, .6); animation: sp-live 2.4s ease-in-out infinite; }
@keyframes sp-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[dir="rtl"] .sp-lab__top { letter-spacing: 0; }
.sp-lab__top b { font-family: var(--sp-mono); font-weight: 500; letter-spacing: 0; color: var(--sp-text); }
.sp-lab__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; direction: ltr; }
.sp-lab__side { display: grid; gap: 12px; min-width: 0; }
[dir="rtl"] .sp-lab__side { direction: rtl; }

.sp-discwrap { position: relative; width: min(270px, 62vw); aspect-ratio: 1; }
.sp-disc { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }

.sp-disc__face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0b0d10 0 7.5%, #c7ccd4 7.6% 9%, #8d939c 9.1% 16%, transparent 16.1%),
        repeating-radial-gradient(circle, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        conic-gradient(from 20deg, #9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #c9d1da, #9fb6c9, #e1b9d4, #a3d4ef, #d9dfe6, #9fb6c9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 24px 50px -20px rgba(0, 0, 0, .8);
}

.sp-disc__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 46%, rgba(0, 0, 0, .08) 47% 97%, rgba(255, 255, 255, .4) 97.5%, transparent 99%); }
.sp-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-disc__sheen { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 46%, transparent 60%); mix-blend-mode: overlay; pointer-events: none; }
.sp-laser__rail { position: absolute; top: 50%; left: 50%; width: 52%; height: 6px; margin-top: -3px; border-radius: 6px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08)); pointer-events: none; }

.sp-laser {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, var(--sp-lime) 30%, rgba(188, 215, 103, .25) 60%, transparent 70%);
    box-shadow: 0 0 18px 4px rgba(188, 215, 103, .55);
    transition: background .15s, box-shadow .15s;
}

.sp-laser.is-err { background: radial-gradient(circle, #fff 0 18%, var(--sp-red) 30%, rgba(255, 90, 95, .25) 60%, transparent 70%); box-shadow: 0 0 22px 6px rgba(255, 90, 95, .6); }
.sp-signal { display: block; width: 100%; height: 86px; border-radius: 12px; background: #0e1014; border: 1px solid var(--sp-line); }
.sp-signal__lbl { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--sp-dim); }
.sp-signal__lbl b { font-family: var(--sp-mono); font-weight: 500; color: var(--sp-lime); }
.sp-signal__lbl b.is-err { color: var(--sp-red); }

.sp-verdict { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--sp-field); border: 1px solid var(--sp-line); border-inline-start: 3px solid var(--sp-tone); }
.sp-verdict__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-tone); }
[dir="rtl"] .sp-verdict__tag { letter-spacing: 0; }
.sp-verdict__tag i, .sp-rule__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-tone); }
.sp-verdict .sp-verdict__title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--sp-text); }
.sp-verdict p { font-size: 13.5px; color: var(--sp-muted); }

.sp-scen { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-scen button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--sp-line2);
    background: var(--sp-deep);
    color: var(--sp-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .25s, background-color .25s, color .25s;
}

.sp-scen button i { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-tone); opacity: .7; }
.sp-scen button[aria-pressed="true"] { color: var(--sp-text); border-color: var(--sp-tone); background: color-mix(in srgb, var(--sp-tone) 12%, var(--sp-deep)); }
/* The chips cycle on their own (disc_check.js, 4.5 s each) until the first tap: a thin progress line under the active one. */
.sp-scen button { position: relative; overflow: hidden; }
.sp-scen.is-auto button[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--sp-tone); opacity: .7; transform-origin: left; transform: scaleX(0); animation: sp-scen-progress 4.5s linear forwards; }
/* A state change: the marks and the verdict text cross-fade (280 ms, at most a 2px blur, nothing moves); the disc spins on. */
.sp-lab [data-lab-marks], .sp-lab .sp-verdict__tag, .sp-lab [data-lab-title], .sp-lab [data-lab-text] { transition: opacity .28s ease-out, filter .28s ease-out; }
.sp-lab .sp-fade-out { opacity: 0; filter: blur(2px); }
/* Opened from the trade page (?from=trade), round 9: a clear lime bar right under the site header, as wide as the content -
   a "←" tile, "Back to my order" + "N items · EGP X · your items are saved" (disc_check.js, from the tray cookie), and the
   lime "Continue my order" button. Sticky at the top on phones. */
.sp-backbar { box-sizing: border-box; display: flex; align-items: center; gap: 12px 16px; width: calc(100% - 2 * var(--g2-wrap-pad, 16px)); max-width: calc(var(--g2-wrap-max, 1180px) - 2 * var(--g2-wrap-pad, 16px)); margin: 12px auto 0; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(188, 215, 103, .55); background: rgba(149, 171, 82, .14); -webkit-user-select: none; user-select: none; }
.sp-backbar__back { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; color: var(--sp-text) !important; text-decoration: none !important; }
.sp-backbar__arrow { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sp-lime); color: var(--sp-on-lime); font-size: 18px; font-weight: 800; }
.sp-backbar__text { display: grid; gap: 2px; min-width: 0; }
.sp-backbar__text b { font-size: 15px; font-weight: 800; color: var(--sp-text); }
.sp-backbar__text small { overflow: hidden; color: var(--sp-body); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.sp-backbar__go { display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--sp-brand); color: #0b0d10 !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color .2s; }
.sp-backbar__go:hover, .sp-backbar__go:focus-visible { background: var(--sp-brand-hover); }
@media (max-width: 767px) {
    .sp-backbar { position: sticky; top: 0; z-index: 30; width: 100%; max-width: none; margin: 0; padding: 10px 16px; border-radius: 0; border-width: 0 0 1px; background: #1b2015; }
    .sp-backbar__go { min-height: 40px; padding: 0 14px; font-size: 13px; }
    .sp-backbar__arrow { width: 36px; height: 36px; }
}
[dir="rtl"] .sp-scen.is-auto button[aria-pressed="true"]::after { transform-origin: right; }
@keyframes sp-scen-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sp-lab__top > span::before, .sp-scen.is-auto button[aria-pressed="true"]::after { animation: none; } .sp-lab .sp-fade-out { opacity: 1; filter: none; } }

/* The three home tests */
.sp-test { display: grid; gap: 12px; align-content: start; padding: 18px; }
.sp-test__no { font-family: var(--sp-mono); font-size: 12px; color: var(--sp-lime); }
.sp-test h3 { font-size: 18px; }
.sp-test p { font-size: 13.5px; color: var(--sp-muted); }
.sp-test__art { position: relative; height: 190px; overflow: hidden; border-radius: 16px; background: #0e1014; border: 1px solid var(--sp-line); touch-action: none; direction: ltr; }
.sp-test__art small { position: absolute; bottom: 10px; left: 12px; font-size: 11.5px; color: var(--sp-dim); }
[dir="rtl"] .sp-test__art small { left: auto; right: 12px; direction: rtl; }

.sp-lt-disc { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, #0e1014 0 8%, #5f656e 8.5% 15%, transparent 15.5%), conic-gradient(from 0deg, #3a4048, #4b525c, #3a4048, #474e57, #3a4048); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sp-lt-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-lt-lamp { position: absolute; top: 0; left: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 220, .35), rgba(255, 250, 220, .08) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.sp-lt-lamp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fffbe6; box-shadow: 0 0 16px 6px rgba(255, 250, 220, .6); }

.sp-nail-lane { position: absolute; left: 14px; right: 14px; height: 70px; }
.sp-nail-lane--a { top: 18px; }
.sp-nail-lane--b { top: 100px; }
.sp-nail-lane__surface { position: absolute; left: 0; right: 0; bottom: 14px; height: 30px; }
.sp-nail-lane__surface svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-nail { position: absolute; left: 0; bottom: 38px; width: 34px; height: 22px; border-radius: 14px 14px 6px 6px; background: linear-gradient(180deg, #f2c9b4, #d9a38c); box-shadow: inset 0 -5px 0 #f7e3d8, 0 4px 10px rgba(0, 0, 0, .4); }
.sp-nail-lane__name { position: absolute; top: 0; left: 0; font-size: 11.5px; color: var(--sp-muted); }
.sp-nail-lane__tag { position: absolute; top: 0; left: 96px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sp-tone) 14%, transparent); color: var(--sp-tone); font-size: 11px; font-weight: 600; }
[dir="rtl"] .sp-nail-lane__name, [dir="rtl"] .sp-nail-lane__tag { direction: rtl; }
.sp-tests.is-anim .sp-nail-lane--a .sp-nail { animation: sp-glide 3.2s var(--sp-ease) infinite; }
.sp-tests.is-anim .sp-nail-lane--b .sp-nail { animation: sp-catch 3.2s var(--sp-ease) infinite; }
@keyframes sp-glide { 0% { transform: translateX(0); } 40% { transform: translateX(var(--sp-mid)) translateY(1px); } 85%, 100% { transform: translateX(var(--sp-end)); } }
@keyframes sp-catch { 0% { transform: translateX(0); } 38% { transform: translateX(var(--sp-mid)); } 44% { transform: translateX(var(--sp-mid)) translateY(7px) rotate(-8deg); } 50% { transform: translateX(var(--sp-mid)) translateY(6px) rotate(6deg); } 56%, 100% { transform: translateX(var(--sp-mid)) translateY(7px) rotate(-3deg); } }
.sp-tests.is-anim .sp-nail-lane--b .sp-nail-lane__tag { animation: sp-flash 3.2s infinite; }
@keyframes sp-flash { 0%, 42% { opacity: .35; } 46%, 100% { opacity: 1; } }

.sp-ec-disc { position: absolute; left: 50%; top: 46%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; opacity: .9; background: radial-gradient(circle, #0e1014 0 8%, #8d939c 8.5% 15%, transparent 15.5%), conic-gradient(from 40deg, #9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #9fb6c9); }
.sp-ec-disc svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; }
.sp-ring-pulse { fill: none; stroke-width: 3; }
.sp-tests.is-anim .sp-ring-pulse { animation: sp-pulse 2.4s ease-in-out infinite; }
.sp-tests.is-anim .sp-ring-pulse--2 { animation-delay: 1.2s; }
@keyframes sp-pulse { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* The disc rule */
.sp-rule { display: grid; gap: 14px; align-content: start; padding: 20px; border-top: 3px solid var(--sp-tone); }
.sp-rule__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-tone); }
[dir="rtl"] .sp-rule__tag { letter-spacing: 0; }
.sp-rule h3 { font-size: 20px; }
.sp-rule__discs { display: flex; gap: 10px; }
.sp-rule ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.sp-rule li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.sp-rule li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--sp-tone); }

.sp-same { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 16px; padding: 20px 22px; }

.sp-seal {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 2px dashed rgba(188, 215, 103, .6);
    color: var(--sp-lime);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    animation: sp-spin 18s linear infinite;
}

[dir="rtl"] .sp-seal { letter-spacing: 0; font-size: 11px; }
.sp-same h3 { font-size: 18px; }
.sp-same p { font-size: 13.5px; color: var(--sp-muted); }
.sp-same a { color: var(--sp-lime) !important; }
.sp-why { padding: 24px; display: grid; gap: 10px; align-content: start; }
.sp-why h3 { font-size: 19px; }
.sp-why p { font-size: 14px; color: var(--sp-muted); }

/* ============================================================================================================
   PAY WITH FAWRY (.sp--fawry)
   ============================================================================================================ */
.sp--fawry .sp-hero { grid-template-columns: 1fr 1fr; }

.sp-codecard { position: relative; overflow: hidden; padding: 28px; border-radius: 26px; background: linear-gradient(145deg, #1a1d22, #111418); border: 1px solid var(--sp-line); }
.sp-codecard::before { content: ""; position: absolute; top: -40%; inset-inline-end: -20%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(244, 182, 61, .22), transparent); }
.sp-codecard > * { position: relative; }
.sp-codecard__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
[dir="rtl"] .sp-codecard__label { letter-spacing: 0; }
.sp-code { display: flex; gap: 10px; margin-block: 14px 18px; direction: ltr; }
[dir="rtl"] .sp-code { justify-content: flex-end; }

.sp-code span {
    display: grid;
    place-items: center;
    width: clamp(64px, 9vw, 92px);
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    background: #0e1014;
    border: 1px solid #2c2618;
    box-shadow: inset 0 -10px 20px rgba(244, 182, 61, .06);
    font-family: var(--sp-mono);
    font-size: clamp(40px, 6vw, 62px);
    font-weight: 600;
    color: var(--sp-gold);
    animation: sp-flip .8s var(--sp-ease) both;
}

.sp-code span:nth-child(2) { animation-delay: .12s; }
.sp-code span:nth-child(3) { animation-delay: .24s; }
@keyframes sp-flip { from { opacity: .001; transform: perspective(400px) rotateX(80deg); } to { opacity: 1; transform: none; } }
.sp-code__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-copied { font-size: 13px; color: var(--sp-lime); opacity: 0; transition: opacity .3s; }
.sp-copied.is-on { opacity: 1; }
.sp-valid { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sp-line); font-size: 13.5px; }
.sp-valid svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sp-gold); }
.sp-valid b { color: var(--sp-text); }

.sp-locator { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 26px 28px; border-color: #3a3220; background: linear-gradient(110deg, #1d1a12, #14171c 60%); }
[dir="rtl"] .sp-locator { background: linear-gradient(250deg, #1d1a12, #14171c 60%); }
.sp-locator h3 { font-size: 19px; }
.sp-locator p { font-size: 14px; color: var(--sp-muted); }

/* ============================================================================================================
   ABOUT US (.sp--about)
   ============================================================================================================ */
.sp-abhero { padding-block: 40px 30px; }
.sp-abhero h1 { max-width: 14ch; margin-block: 16px 22px; font-size: clamp(40px, 7.4vw, 92px); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
[dir="rtl"] .sp-abhero h1 { letter-spacing: 0; line-height: 1.2; }
.sp-abhero__since { color: transparent; -webkit-text-stroke: 1.5px var(--sp-lime); }
.sp-abhero__lead { max-width: 58ch; font-size: 17px; }

.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.sp-stat { display: grid; gap: 4px; padding: 20px 22px; }
.sp-stat__v { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--sp-text); direction: ltr; text-align: start; }
[dir="rtl"] .sp-stat__v { text-align: end; }
.sp-stat__v em { font-style: normal; color: var(--sp-lime); }
.sp-stat__k { font-size: 13px; color: var(--sp-muted); }
a.sp-stat { color: inherit !important; }

/* Our stores, up close: an endless strip of the open stores' cover photos (pauses on hover) */
.sp-strip { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-strip__track { display: flex; gap: 14px; width: max-content; direction: ltr; animation: sp-marquee 48s linear infinite; }
.sp-strip:hover .sp-strip__track, .sp-strip:focus-within .sp-strip__track { animation-play-state: paused; }
@keyframes sp-marquee { to { transform: translateX(-50%); } }

.sp-shot { position: relative; flex: 0 0 auto; width: 300px; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border-radius: var(--sp-r-md); border: 1px solid var(--sp-line); background: var(--sp-surface); }
.sp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sp-ease); backface-visibility: hidden; }
.sp-shot:hover img { transform: scale(1.06); }
.sp-shot::after { content: ""; position: absolute; inset: 40% 0 -1px; background: linear-gradient(transparent, rgba(11, 13, 16, .92)); }
.sp-shot__cap { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: grid; }
[dir="rtl"] .sp-shot__cap { direction: rtl; }
.sp-shot__cap span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-lime); }
[dir="rtl"] .sp-shot__cap span { letter-spacing: 0; }
.sp-shot__cap b { font-size: 16px; font-weight: 600; color: var(--sp-text); }

.sp-storelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 18px; }

.sp-rev { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
.sp-rev__score { display: grid; gap: 10px; align-content: start; padding: 26px; }
.sp-rev__big { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--sp-text); }
.sp-stars { display: flex; gap: 4px; direction: ltr; }
[dir="rtl"] .sp-stars { justify-content: flex-end; }
.sp-stars span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: linear-gradient(90deg, #00b67a var(--sp-star-fill, 100%), #3a404a var(--sp-star-fill, 100%)); }
.sp-stars svg { width: 16px; height: 16px; color: #fff; }
.sp-rev__count { font-size: 13px; color: var(--sp-muted); }
/* "Last updated" sits 3px under the count; the reviews link follows (the trust card's order). */
.sp-rev__counts { display: grid; gap: 3px; }
.sp-rev__updated { font-size: 12px; color: var(--sp-dim, var(--sp-muted)); }
.sp .sp-rev__link { justify-self: start; font-size: 13px; font-weight: 600; color: #95ab52; text-decoration: none; }
.sp .sp-rev__link::after { content: " \2192"; }
[dir="rtl"] .sp .sp-rev__link::after { content: " \2190"; }
.sp .sp-rev__link:hover { color: #a8bf62; text-decoration: underline; }
.sp-rev__themes { display: grid; gap: 14px; align-content: start; min-width: 0; }

.sp-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sp-member { display: grid; justify-items: center; gap: 10px; padding: 22px; text-align: center; }
.sp-member img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--sp-raised); box-shadow: 0 0 0 4px var(--sp-surface), 0 0 0 5px var(--sp-line2); }
.sp-member b { color: var(--sp-text); font-weight: 600; }
.sp-member span { font-size: 12.5px; color: var(--sp-muted); }

.sp-door { padding: 22px; display: grid; gap: 8px; align-content: start; color: inherit !important; transition: transform .3s var(--sp-ease), border-color .3s; }
.sp-door:hover { transform: translateY(-4px); border-color: rgba(188, 215, 103, .4); }
.sp-door__k { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
[dir="rtl"] .sp-door__k { letter-spacing: 0; }
.sp-door b { font-size: 20px; font-weight: 700; color: var(--sp-text); }
.sp-door p { font-size: 13.5px; color: var(--sp-muted); }
.sp-door__go { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--sp-lime); transition: transform .3s var(--sp-ease); }
.sp-door:hover .sp-door__go { transform: translateX(4px); }
[dir="rtl"] .sp-door:hover .sp-door__go { transform: translateX(-4px); }

/* ============================================================================================================
   POLICIES AND ACCOUNT DELETION (.sp--doc)
   ============================================================================================================ */
.sp-dochero { display: grid; gap: 14px; padding-block: 26px; }
.sp-dochero h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.025em; }
[dir="rtl"] .sp-dochero h1 { letter-spacing: 0; }
.sp-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-switch a { padding: 8px 16px; border: 1px solid var(--sp-line2); border-radius: 999px; color: var(--sp-muted) !important; font-size: 13.5px; font-weight: 500; }
.sp-switch a:hover { color: var(--sp-text) !important; }
.sp-switch a[aria-current="page"] { background: var(--sp-text); border-color: var(--sp-text); color: #0b0d10 !important; }
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--sp-muted); }
.sp-meta__law { color: var(--sp-text); }

.sp-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.sp-gl { display: grid; gap: 6px; align-content: start; padding: 18px; color: inherit !important; }
.sp-gl__v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--sp-text); }
.sp-gl__v--lime { color: var(--sp-lime); }
.sp-gl__v--red { color: var(--sp-red); }
.sp-gl p { font-size: 13px; color: var(--sp-muted); }

.sp-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.sp-toc { position: sticky; top: 16px; display: grid; gap: 14px; }
.sp-toc__find small { display: block; min-height: 1.2em; margin-top: 6px; font-size: 12px; color: var(--sp-dim); }
.sp-toc__find .sp-input { border-radius: 12px; font-size: 13.5px; }
.sp-toc nav { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; border-inline-start: 1px solid var(--sp-line); }

.sp-toc nav a {
    display: block;
    margin-inline-start: -1px;
    padding: 6px 14px;
    border-inline-start: 2px solid transparent;
    color: var(--sp-muted) !important;
    font-size: 13px;
    line-height: 1.4;
    transition: color .2s, border-color .2s;
}

.sp-toc nav a:hover { color: var(--sp-text) !important; }
.sp-toc nav a.is-on { color: var(--sp-lime) !important; border-color: var(--sp-lime); }
.sp-readbar { height: 3px; overflow: hidden; border-radius: 3px; background: var(--sp-line); }
.sp-readbar i { display: block; width: 100%; height: 100%; background: var(--sp-lime); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .sp-readbar i { transform-origin: right; }

.sp-doc__body { display: grid; gap: 14px; max-width: 760px; min-width: 0; }
.sp-clause { padding: 24px 26px; scroll-margin-top: 20px; overflow-wrap: anywhere; }
.sp-clause h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; font-size: 19px; }
.sp-clause__no { font-family: var(--sp-mono); font-size: 13px; font-weight: 600; color: var(--sp-lime); }
.sp-clause p { margin-bottom: 10px; color: var(--sp-body); }
.sp-clause p:last-child { margin-bottom: 0; }
.sp-clause ul { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.sp-clause ul:last-child { margin-bottom: 0; }
.sp-clause ul > li { position: relative; padding-inline-start: 20px; }
.sp-clause ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--sp-brand); transform: rotate(45deg); }
.sp-clause ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-clause a { color: var(--sp-lime) !important; }
.sp-clause mark { padding: 0 2px; border-radius: 3px; background: rgba(244, 182, 61, .3); color: var(--sp-text); }
.sp-clause__warn { padding: 12px 14px; border-radius: 12px; border-inline-start: 3px solid var(--sp-red); background: rgba(255, 90, 95, .08); color: var(--sp-body); }

.sp-helpband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; }
.sp-helpband h2 { font-size: 18px; }
.sp-helpband p { font-size: 14px; color: var(--sp-muted); }

/* ============================================================================================================
   404 (.sp--404)
   ============================================================================================================ */
.sp-nf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding-block: 40px 20px; }
.sp-nf h1 { margin-block: 14px; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; }
[dir="rtl"] .sp-nf h1 { letter-spacing: 0; }
.sp-nf__lead { max-width: 44ch; color: var(--sp-muted); }

.sp-glitch { position: relative; display: inline-block; font-size: clamp(90px, 14vw, 170px); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--sp-text); direction: ltr; }
.sp-glitch::before, .sp-glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.sp-glitch::before { color: var(--sp-ps); clip-path: inset(0 0 60% 0); animation: sp-gl1 3.2s infinite steps(1); }
.sp-glitch::after { color: var(--sp-nin); clip-path: inset(55% 0 0 0); animation: sp-gl2 3.2s infinite steps(1); }
@keyframes sp-gl1 { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-4px, -2px); } 94% { transform: translate(3px, 1px); } }
@keyframes sp-gl2 { 0%, 86%, 100% { transform: none; } 89% { transform: translate(4px, 2px); } 93% { transform: translate(-3px, 0); } }

.sp-nf__search { display: flex; gap: 8px; max-width: 460px; margin-block: 24px 18px; }
.sp-nf__search .sp-input { flex: 1; min-width: 0; padding-block: 12px; }
.sp-game { display: grid; gap: 12px; padding: 16px; }
.sp-game__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--sp-muted); }
.sp-game__top b { font-family: var(--sp-mono); color: var(--sp-text); }
.sp-game canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 14px; background: #0e1014; border: 1px solid var(--sp-line); cursor: pointer; touch-action: manipulation; }
.sp-game__hint { font-size: 12.5px; text-align: center; color: var(--sp-dim); }

/* ============================================================================================================
   RESPONSIVE
   ============================================================================================================ */
@media (max-width: 980px) {
    .sp-player, .sp-rev, .sp-doc { grid-template-columns: minmax(0, 1fr); }
    .sp-toc { position: static; }
    .sp-toc nav { grid-auto-flow: column; max-height: none; overflow-x: auto; border: 0; border-bottom: 1px solid var(--sp-line); }
    .sp-toc nav a { margin: 0; border-inline-start: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
    .sp-toc nav a.is-on { border-color: var(--sp-lime); }
    .sp-cards--4, .sp-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp--disc .sp-hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .sp-hero, .sp--fawry .sp-hero, .sp-nf, .sp-lists, .sp-cards, .sp-cards--2 { grid-template-columns: minmax(0, 1fr); }
    .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-steps::before { display: none; }
    .sp-stats, .sp-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-phone { width: 230px; height: 460px; }
    .sp-same { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .sp-lab__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .sp-lab__side { width: 100%; }
    .sp-shot { width: 240px; }
}

@media (max-width: 440px) {
    .sp-cards--4, .sp-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-tile, .sp-door, .sp-member { padding: 16px; }
}

/* ============================================================================================================
   REDUCED MOTION: no animation, no transition, the strip and the lab stand still
   ============================================================================================================ */
@media (prefers-reduced-motion: reduce) {
    .sp *, .sp *::before, .sp *::after,
    .g2-svc * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .sp-spin-disc, .sp-seal, .sp-strip__track { animation: none !important; }
}