/* ==========================================================================
   TechSite public site — accepted redesign.
   Scoped to body.techsite-redesign so the studio, backoffice, dashboard and
   published tenant sites are never touched by this sheet.

   One design language for every public page:
     · square corners, no shadows, hairline rules instead of cards
     · red #ca2027 reserved for accents, numerals and primary actions
     · IBM Plex Mono kickers / breadcrumbs / meta, uppercase and letter-spaced
     · one display type scale shared by the homepage and every inner page
   ========================================================================== */

:root {
    --ts-red: #ca2027;
    --ts-red-deep: #a5191f;
    --ts-red-soft: #e2565b;
    --ts-ink: #101314;
    --ts-dark: #1c1f21;
    --ts-text: #3d4144;
    --ts-muted: #6a6e71;
    --ts-faint: #a9aeb0;
    --ts-surface: #f4f3f1;
    --ts-line: #e3e1dd;
    --ts-line-warm: #d9d6d1;
    --ts-line-dark: #2b2f31;
    --ts-container: min(1240px, calc(100% - 48px));
    --ts-section: 104px;
    --ts-sans: "Space Grotesk", "Tajawal", sans-serif;
    --ts-mono: "IBM Plex Mono", monospace;
}

html[dir="rtl"] {
    --ts-sans: "Tajawal", sans-serif;
}

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------- base ---- */
body.techsite-redesign {
    margin: 0;
    color: var(--ts-text);
    background: #fff;
    font-family: var(--ts-sans);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

.techsite-redesign *, .techsite-redesign *::before, .techsite-redesign *::after { box-sizing: border-box; }
.techsite-redesign h1, .techsite-redesign h2, .techsite-redesign h3, .techsite-redesign p { margin-block-start: 0; }
.techsite-redesign h1, .techsite-redesign h2, .techsite-redesign h3 {
    color: var(--ts-ink);
    font-family: var(--ts-sans);
    text-wrap: pretty;
}
.techsite-redesign a { color: inherit; }
.techsite-redesign img { max-width: 100%; }
.ts-container { width: var(--ts-container) !important; margin-inline: auto !important; }

.techsite-redesign :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(202, 32, 39, .38);
    outline-offset: 3px;
}

/* --------------------------------------------------------- primitives ---- */
/* One kicker. .bindex-kicker (home), .ts-kicker and .eyebrow (inner pages)
   deliberately resolve to the same thing so the rhythm never shifts. */
.ts-kicker,
.bindex-kicker,
.techsite-redesign .eyebrow,
.techsite-redesign .legacy-page-heading > span {
    color: var(--ts-red);
    display: block;
    font-family: var(--ts-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.7;
    text-transform: uppercase;
}

.bindex-kicker-light { color: rgba(255, 255, 255, .72); }

/* Buttons are square everywhere. The pill shapes that used to sit on the
   inner pages and in the header read as a different product. */
/* The !important flags here exist only to beat the pre-redesign sheet, which
   sets font-size and display with !important on .legacy-ghost-action. */
.ts-button,
.bindex-button,
.techsite-redesign .legacy-cta,
.techsite-redesign .legacy-ghost-action,
.techsite-redesign .legacy-outline-action,
.techsite-redesign .legacy-small-action,
.techsite-redesign .button,
.techsite-redesign .public-nav .button {
    min-height: 54px;
    padding: 0 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--ts-sans);
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.techsite-redesign .button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.techsite-redesign .button-small,
.techsite-redesign .public-nav .button,
.techsite-redesign .legacy-small-action { min-height: 46px; padding-inline: 22px; font-size: 14px !important; }

.ts-button-primary,
.techsite-redesign .legacy-cta,
.techsite-redesign .button,
.techsite-redesign .public-nav .button { color: #fff !important; background: var(--ts-red); border-color: var(--ts-red); }
.ts-button-primary:hover,
.techsite-redesign .legacy-cta:hover,
.techsite-redesign .button:hover,
.techsite-redesign .public-nav .button:hover { background: var(--ts-red-deep); border-color: var(--ts-red-deep); }

.ts-button-dark,
.bindex-button-dark,
.techsite-redesign .legacy-small-action { color: #fff !important; background: var(--ts-ink); border-color: var(--ts-ink); }
.ts-button-dark:hover,
.bindex-button-dark:hover,
.techsite-redesign .legacy-small-action:hover { color: #fff !important; background: var(--ts-red); border-color: var(--ts-red); }

.bindex-button-ghost,
.techsite-redesign .legacy-ghost-action { color: #fff !important; background: transparent; border-color: rgba(255, 255, 255, .55); }
.bindex-button-ghost:hover,
.techsite-redesign .legacy-ghost-action:hover { color: var(--ts-ink) !important; background: #fff; border-color: #fff; }

.techsite-redesign .button-secondary {
    color: var(--ts-ink) !important;
    background: transparent;
    border-color: var(--ts-ink);
}
.techsite-redesign .button-secondary:hover { color: #fff !important; background: var(--ts-ink); }

.techsite-redesign .button[disabled], .techsite-redesign button[disabled] { opacity: .55; cursor: not-allowed; }

/* Inline text links inside prose. */
.techsite-redesign .legacy-rich-copy a:not([class]),
.techsite-redesign .legal-page a:not([class]),
.techsite-redesign .form-panel a:not([class]),
.techsite-redesign .legacy-page-content p > a:not([class]) {
    color: var(--ts-red);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.techsite-redesign .legacy-rich-copy a:not([class]):hover,
.techsite-redesign .legal-page a:not([class]):hover,
.techsite-redesign .form-panel a:not([class]):hover { color: var(--ts-red-deep); }

/* ------------------------------------------------------------ top bar ---- */
.techsite-redesign .ts-topbar {
    min-height: 44px;
    position: relative;
    top: auto;
    z-index: 60;
    color: #8e9294;
    background: var(--ts-ink);
    border-bottom: 1px solid #1f2325;
    font-size: 13px;
    line-height: 1;
}

.techsite-redesign .ts-topbar .legacy-topline-inner { min-height: 44px; }
.techsite-redesign .legacy-contact-links, .techsite-redesign .legacy-account-links { gap: 24px; }
.techsite-redesign .legacy-top-icon { width: 15px; height: 15px; stroke: var(--ts-red); }
.techsite-redesign .legacy-topline a, .techsite-redesign .legacy-language-menu summary, .techsite-redesign .legacy-account-links .nav-link-button { color: #8e9294; }
.techsite-redesign .legacy-topline a:hover, .techsite-redesign .legacy-language-menu summary:hover, .techsite-redesign .legacy-account-links .nav-link-button:hover { color: #fff; }

/* ------------------------------------------------------------- header ---- */
.techsite-redesign .ts-header {
    height: 96px;
    min-height: 96px;
    position: relative;
    top: auto;
    background: var(--ts-dark);
    border-bottom: 1px solid var(--ts-line-dark);
}

.techsite-redesign .ts-header .legacy-header-inner { height: 96px; gap: 34px; }
.techsite-redesign .legacy-logo img { width: 172px; height: 40px; object-fit: contain; }
/* The legacy sheet collapses this nav into an absolutely positioned panel from
   1260px down while this sheet used to re-show the toggle only at 900px, which
   left the primary navigation invisible and unreachable between those widths.
   Every collapsed-panel property is therefore reset explicitly here, and the
   collapse is re-declared once, below, at a single breakpoint. */
.techsite-redesign .public-nav {
    width: auto;
    padding: 0;
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(14px, 1.6vw, 26px);
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ts-faint);
    font-family: var(--ts-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}

.techsite-redesign .public-nav > a { padding: 0; position: relative; border: 0; color: var(--ts-faint); white-space: nowrap; }
.techsite-redesign .public-nav .button { width: auto; margin-top: 0; }
.techsite-redesign .public-nav > a:not(.button)::after {
    width: 100%; height: 2px; position: absolute; inset-inline-start: 0; inset-block-end: -14px;
    content: ""; background: transparent; transition: background-color .18s ease;
}
.techsite-redesign .public-nav > a:not(.button):hover, .techsite-redesign .public-nav > a[aria-current="page"] { color: #fff; }
.techsite-redesign .public-nav > a[aria-current="page"]::after { background: var(--ts-red); }
.techsite-redesign .nav-toggle {
    width: 46px; height: 46px; display: none; place-items: center;
    color: #fff; background: transparent; border: 1px solid #34383a; border-radius: 0; font-size: 20px;
}

body.techsite-redesign.legacy-home .ts-topbar,
body.techsite-redesign.legacy-home .ts-header { position: relative; inset: auto; }

/* ==========================================================================
   Homepage — accepted direction. Structure unchanged; only shared primitives
   (kicker, buttons) are now inherited rather than redeclared.
   ========================================================================== */
.bindex-home { color: var(--ts-text); background: var(--ts-surface); }
.bindex-button { min-height: 58px; padding-inline: 34px; }

.bindex-hero { position: relative; color: #fff; background: var(--ts-ink); }
.bindex-hero-stage { min-height: 100vh; position: relative; overflow: hidden; }
.bindex-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .7s ease, visibility .7s ease;
}
.bindex-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.bindex-slide-background,
.bindex-slide-overlay {
    position: absolute;
    inset: 0;
}
.bindex-slide-background {
    background: center center / cover no-repeat var(--ts-dark);
    transform: scale(1.01);
}
.bindex-slide-background > img,
.bindex-slide-background > video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.96) contrast(1.02);
}
.bindex-slide-background-fallback {
    background-image: linear-gradient(135deg, rgba(28,31,33,.95), rgba(16,19,20,.88));
}
.bindex-slide-overlay {
    background:
        linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.58)),
        linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
}
.bindex-hero-copy {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 136px 188px;
    text-align: center;
}
.bindex-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color: rgba(255,255,255,.86);
    font-family: var(--ts-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.7;
    text-transform: uppercase;
}
.bindex-hero-kicker::before,
.bindex-hero-kicker::after {
    width: 74px;
    height: 10px;
    display: block;
    content: "";
    border-top: 1px solid rgba(255,255,255,.38);
    border-bottom: 1px solid rgba(255,255,255,.18);
    opacity: .9;
}
.bindex-hero-copy h1,
.bindex-hero-copy h2 {
    max-width: 13ch;
    margin: 20px auto 0;
    color: #fff;
    font-size: clamp(64px, 8vw, 122px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .9;
}
html[dir="rtl"] .bindex-hero-copy h1,
html[dir="rtl"] .bindex-hero-copy h2 {
    letter-spacing: -.02em;
    line-height: 1;
}
.bindex-hero-copy > p {
    max-width: 760px;
    margin: 20px auto 0;
    color: rgba(255,255,255,.92);
    font-size: clamp(18px, 2.15vw, 28px);
    font-weight: 600;
    line-height: 1.55;
}
.bindex-hero-actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.bindex-hero-controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 76px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.bindex-slide-index {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.bindex-slide-index button {
    width: 14px;
    height: 14px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.bindex-slide-index button > span {
    width: 10px;
    height: 10px;
    display: block;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    background: transparent;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
    opacity: .86;
}
.bindex-slide-index button:hover > span,
.bindex-slide-index button.is-active > span {
    background: #fff;
    border-color: #fff;
    transform: scale(1.08);
    opacity: 1;
}
.bindex-slide-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.bindex-slide-arrow {
    width: 56px;
    height: 56px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: rgba(16,19,20,.22);
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 0;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bindex-slide-arrow:hover {
    color: var(--ts-ink);
    background: #fff;
    border-color: #fff;
}
.bindex-slide-arrow > span {
    font-size: 28px;
    line-height: 1;
}
.bindex-facts-rail { background: var(--ts-ink); }
.bindex-facts { min-height: 92px; padding-block: 26px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.bindex-facts > div { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.bindex-facts strong { color: #fff; font-size: 26px; font-weight: 700; line-height: 1; }
.bindex-facts span { color: #8e9294; font-size: 15px; }
.bindex-facts > a { margin-inline-start: auto; color: var(--ts-red-soft); font: 500 12px/1.6 var(--ts-mono); letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.bindex-facts > a:hover { color: #fff; }

.bindex-how > .ts-container { padding-top: var(--ts-section); }
.bindex-section-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; }
.bindex-section-heading h2 { margin: 0; color: var(--ts-ink); font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.bindex-steps { margin-top: 76px; padding-bottom: 60px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.bindex-steps article { min-width: 0; display: flex; flex-direction: column; }
.bindex-steps article:nth-child(2) { margin-top: 52px; }
.bindex-steps article:nth-child(3) { margin-top: 104px; }
.bindex-steps article:nth-child(4) { margin-top: 156px; }
.bindex-step-rule { height: 2px; background: var(--ts-red); }
.bindex-steps article > header { padding-top: 16px; display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; }
.bindex-steps article > header i { width: 9px; height: 9px; flex: 0 0 auto; background: var(--ts-ink); }
.bindex-steps article > img { width: 100%; margin-top: 24px; display: block; aspect-ratio: .86; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bindex-steps h3 { margin: 24px 0 8px; color: var(--ts-ink); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.bindex-steps p { margin: 0; color: var(--ts-muted); font-size: 16.5px; line-height: 1.65; }

.bindex-video { margin-top: var(--ts-section); position: relative; color: #fff; background: var(--ts-ink); overflow: hidden; }
.bindex-video > img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; opacity: .3; filter: grayscale(1); }
.bindex-video > .ts-container { padding-block: 130px; position: relative; text-align: center; }
.bindex-video h2 { max-width: 820px; margin: 20px auto 0; color: #fff; font-size: 64px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.bindex-video p { margin: 18px 0 40px; color: var(--ts-faint); font-size: 20px; }
.bindex-video div > a { width: 96px; height: 96px; margin: 0 auto; display: grid; place-items: center; color: #fff; background: var(--ts-red); border-radius: 50%; font-size: 28px; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.bindex-video div > a:hover { background: var(--ts-red-deep); transform: scale(1.04); }

.bindex-features > .ts-container { padding-block: var(--ts-section); }
.bindex-feature-list { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.bindex-feature-list article { min-height: 108px; padding-block: 26px; display: grid; grid-template-columns: 1fr 44px; gap: 20px; align-items: center; border-top: 1px solid var(--ts-line-warm); }
.bindex-feature-list h3 { margin: 0; color: var(--ts-ink); font-size: 23px; font-weight: 600; line-height: 1.35; }
.bindex-feature-list p { margin: 6px 0 0; color: var(--ts-muted); font-size: 14px; line-height: 1.5; }
.bindex-feature-list img { width: 40px; height: 40px; display: block; object-fit: cover; mix-blend-mode: multiply; }

.bindex-pricing { background: #fff; }
.bindex-pricing > .ts-container { padding-block: var(--ts-section); }
.bindex-pricing-heading {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.bindex-pricing-heading h2 { margin: 18px 0 0; color: var(--ts-ink); font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.bindex-pricing-heading p { max-width: 56ch; margin: 0; color: var(--ts-faint); font-size: 18px; line-height: 1.7; }
.bindex-pricing-heading > a {
    padding-bottom: 4px;
    color: var(--ts-red);
    border-bottom: 2px solid var(--ts-red);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.bindex-empty { margin: 56px 0 0; padding: 30px; border: 1px solid var(--ts-line); color: var(--ts-muted); }
.bindex-plan-showcase {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.bindex-plan-card {
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ts-line-warm);
    background: #fff;
}
.bindex-plan-card.is-featured {
    position: relative;
    border-color: var(--ts-ink);
    border-top-width: 3px;
    border-top-color: var(--ts-red);
}
.bindex-plan-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 28px;
}
.bindex-plan-card-head > span {
    color: var(--ts-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.3;
}
.bindex-plan-card.is-featured .bindex-plan-card-head > span { color: var(--ts-red); }
.bindex-plan-card-head > strong {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ts-ink);
    font-size: clamp(48px, 4.5vw, 62px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .9;
}
.bindex-plan-card-head > strong small {
    color: var(--ts-ink);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    order: -1;
}
.bindex-plan-card-head > em {
    color: var(--ts-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.4;
}
.bindex-plan-card-head > p {
    margin: 0;
    color: var(--ts-muted);
    font-size: 14px;
    line-height: 1.65;
}
/* CTA: use site's ts-button base but stretch it full-width */
.bindex-plan-card-cta {
    align-self: stretch;
    margin-bottom: 28px;
}
.bindex-plan-card-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--ts-line);
}
.bindex-plan-card-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ts-line);
    color: var(--ts-ink);
    font-size: 15px;
    line-height: 1.5;
}
.bindex-plan-card-features li > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: var(--ts-ink);
    border-radius: 999px;
    padding: 3px;
    box-sizing: border-box;
}
.bindex-plan-card.is-featured .bindex-plan-card-features li > svg { background: var(--ts-red); }
.bindex-matrix-scroll { margin-top: 56px; overflow-x: auto; scrollbar-width: thin; }
.bindex-plan-matrix {
    min-width: 900px;
    border: 1px solid var(--ts-line-warm);
    border-top: 2px solid var(--ts-ink);
}
.bindex-matrix-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(var(--bindex-plan-count), minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--ts-line);
}
.bindex-matrix-row:last-child { border-bottom: 0; }
.bindex-matrix-row > * { min-width: 0; }
.bindex-matrix-row > :first-child { padding-inline: 22px 18px; }
.bindex-matrix-row > :not(:first-child) {
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-inline-start: 1px solid var(--ts-line);
}
/* Featured plan is always the second plan (3rd grid child: label + plan 0 + plan 1). */
.bindex-matrix-row > :nth-child(3) { background: rgba(202, 32, 39, .045); }
.bindex-matrix-head { padding-block: 28px 24px; border-bottom: 1px solid var(--ts-line-warm); }
.bindex-matrix-label { display: flex; align-items: center; color: var(--ts-ink); font-size: 16.5px; font-weight: 500; }
.bindex-matrix-head > .bindex-matrix-label { color: var(--ts-muted); font: 400 12px/1.6 var(--ts-mono); letter-spacing: .16em; text-transform: uppercase; }
.bindex-plan-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-block: 4px;
}
.bindex-plan-head > span { color: var(--ts-muted); font-size: 15px; font-weight: 600; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.bindex-plan-head.is-featured > span { color: var(--ts-red); }
.bindex-plan-head.is-featured::before {
    position: absolute;
    inset-inline: 0;
    top: -28px;
    height: 3px;
    content: "";
    background: var(--ts-red);
}
.bindex-plan-head > strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    color: var(--ts-ink);
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .9;
}
.bindex-plan-head > strong small { color: var(--ts-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.bindex-plan-head > em { color: var(--ts-muted); font-size: 14px; font-style: normal; }
.bindex-plan-matrix > .bindex-matrix-row:not(.bindex-matrix-head):not(.bindex-matrix-actions) { min-height: 64px; padding-block: 18px; }
.bindex-plan-matrix > .bindex-matrix-row > span:not(.bindex-matrix-label) { color: var(--ts-ink); font-size: 16.5px; line-height: 1.45; }
.bindex-plan-matrix > .bindex-matrix-row > span.is-included { color: var(--ts-muted); }
.bindex-matrix-actions { padding-block: 24px; border-bottom: 0; }
.bindex-matrix-actions > :first-child { min-height: 0; }
.bindex-matrix-actions > a {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: transparent;
    background-image: linear-gradient(var(--ts-ink), var(--ts-ink));
    background-clip: content-box;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-image .18s ease, color .18s ease;
}
.bindex-matrix-actions > a:hover { background-image: linear-gradient(var(--ts-red), var(--ts-red)); }
.bindex-matrix-actions > a.is-featured { background-image: linear-gradient(var(--ts-red), var(--ts-red)); }
.bindex-matrix-actions > a.is-featured:hover { background-image: linear-gradient(var(--ts-red-deep), var(--ts-red-deep)); }

.bindex-stats { color: #fff; background: var(--ts-red); }
.bindex-stats > .ts-container { padding-block: 88px; }
.bindex-stats header { padding-bottom: 44px; display: flex; align-items: end; justify-content: space-between; gap: 40px; border-bottom: 1px solid rgba(255,255,255,.32); }
.bindex-stats h2 { margin: 0; color: #fff; font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.bindex-stats header > a { min-height: 52px; padding: 0 28px; display: inline-flex; align-items: center; color: #fff; border: 1px solid rgba(255,255,255,.6); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bindex-stats header > a:hover { color: var(--ts-red); background: #fff; }
.bindex-stats .ts-container > div { margin-top: 48px; display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.bindex-stats strong { display: flex; flex-direction: column; gap: 12px; color: #fff; font-size: 76px; font-weight: 700; letter-spacing: -.045em; line-height: .9; }
.bindex-stats small { color: rgba(255,255,255,.82); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }

.bindex-countdown { color: #fff; background: var(--ts-ink); }
.bindex-countdown > .ts-container { min-height: 132px; padding-block: 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.bindex-countdown .bindex-kicker { color: var(--ts-red-soft); }
.bindex-countdown .ts-container > div { display: flex; align-items: baseline; gap: 36px; }
.bindex-countdown strong { display: flex; align-items: baseline; gap: 10px; color: #fff; font-size: clamp(48px, 5.5vw, 72px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* Fixed track width per number: without it the band re-flows every time a value
   drops a digit (10 -> 9 seconds), dragging the whole row sideways. */
.bindex-countdown strong > span { display: inline-block; min-width: 2ch; text-align: center; }
.bindex-countdown strong > span[data-countdown-part="days"] { min-width: 3ch; }
.bindex-countdown strong > span.is-ticking { animation: bindex-tick .35s ease-out; }
.bindex-countdown small { color: var(--ts-muted); font: 400 13px/1 var(--ts-mono); letter-spacing: .16em; text-transform: uppercase; }

@keyframes bindex-tick {
    from { opacity: .4; }
    to { opacity: 1; }
}

.bindex-customers > .ts-container { padding-block: 96px; }
.bindex-customers h2 { max-width: 900px; margin: 0; color: var(--ts-ink); font-size: 40px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.bindex-customers p { margin: 16px 0 0; color: var(--ts-red); font-size: 18px; }
.bindex-brand-marquee { margin-top: 48px; padding-top: 40px; overflow: hidden; border-top: 1px solid var(--ts-line-warm); }
.bindex-brand-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 48px; width: max-content; animation: bindex-brand-scroll 14s linear infinite; }
.bindex-brand-marquee:hover .bindex-brand-row,
.bindex-brand-marquee:focus-within .bindex-brand-row { animation-play-state: paused; }
.bindex-brand-row img { width: 96px; height: 56px; display: block; flex-shrink: 0; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; opacity: .5; }

@keyframes bindex-brand-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

[dir="rtl"] .bindex-brand-row {
    animation-direction: reverse;
}

.bindex-affiliate { color: #fff; background: var(--ts-red-soft); }
.bindex-affiliate > .ts-container { min-height: 136px; padding-block: 42px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.bindex-affiliate h2 { margin: 0 0 4px; color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.bindex-affiliate p { margin: 0; color: rgba(255,255,255,.88); font-size: 16px; }
.bindex-affiliate a { min-height: 52px; padding: 0 30px; display: inline-flex; align-items: center; color: #fff; background: var(--ts-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bindex-affiliate a:hover { background: var(--ts-red-deep); }

.bindex-contact {
    background: var(--ts-surface);
    border-block-start: 1px solid var(--ts-line);
}
.bindex-contact > .ts-container {
    padding-block: 96px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}
.bindex-contact-panel {
    padding: 36px 40px 40px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ts-line-warm);
}
.bindex-contact-panel h2 {
    margin: 14px 0 28px;
    color: var(--ts-ink);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.bindex-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.bindex-contact label {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    color: var(--ts-muted);
    font-size: 13px;
    font-weight: 500;
}
.bindex-contact-row label { margin-top: 0; }
.bindex-contact input,
.bindex-contact textarea {
    width: 100%;
    padding: 14px 16px;
    color: var(--ts-ink);
    background: var(--ts-surface);
    border: 1px solid var(--ts-line-warm);
    border-block-end: 2px solid var(--ts-line-warm);
    border-radius: 0;
    font: inherit;
    transition: border-color .18s ease, background-color .18s ease;
}
.bindex-contact input:hover,
.bindex-contact textarea:hover {
    border-color: var(--ts-line-dark);
    border-block-end-color: var(--ts-line-dark);
}
.bindex-contact input:focus,
.bindex-contact textarea:focus {
    background: #fff;
    border-color: var(--ts-line-warm);
    border-block-end-color: var(--ts-red);
}
.bindex-contact textarea { min-height: 120px; resize: vertical; }
.bindex-contact button {
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    padding: 0 34px;
    color: #fff;
    background: var(--ts-red);
    border: 0;
    border-radius: 0;
    font: 600 15px/1.2 var(--ts-sans);
    cursor: pointer;
    transition: background-color .18s ease;
}
.bindex-contact button:hover { background: var(--ts-red-deep); }
.public-form-status { margin: -8px 0 20px; padding: 12px 14px; border-inline-start: 3px solid currentColor; font-size: 14px; line-height: 1.6; }
.public-form-status.is-success { color: #216e46; background: #edf8f1; }
.public-form-status.is-error { color: #a52626; background: #fff1f1; }
.public-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bindex-contact-side {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ts-line-warm);
    background: #fff;
}
.bindex-map {
    flex: 1 1 auto;
    min-height: 380px;
    overflow: hidden;
    background: var(--ts-surface);
}
.bindex-map iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    display: block;
    border: 0;
    filter: grayscale(.25);
}
.bindex-contact-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-block-start: 1px solid var(--ts-line);
}
.bindex-contact-details > div {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bindex-contact-details > div + div {
    border-inline-start: 1px solid var(--ts-line);
}
.bindex-contact-details span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ts-muted);
    font: 400 11px/1.4 var(--ts-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bindex-contact-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bindex-contact-details a {
    color: var(--ts-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .18s ease;
}
.bindex-contact-details a:hover { color: var(--ts-red); }

/* ==========================================================================
   Inner pages — same language as the homepage.
   ========================================================================== */

/* ---------------------------------------------------------- page hero ---- */
.techsite-redesign .legacy-internal-hero {
    min-height: 340px;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--ts-ink);
    overflow: hidden;
    text-align: start;
}

/* Optional photographic wash, matched to the grayscale treatment on the home hero. */
.techsite-redesign .legacy-internal-hero::before { display: none; }
.techsite-redesign .legacy-internal-hero-about::before,
.techsite-redesign .legacy-services-hero::before {
    width: 100%; height: 100%; position: absolute; inset: 0; display: block; content: "";
    background: center/cover no-repeat; filter: grayscale(1) contrast(1.1); opacity: .22;
}
.techsite-redesign .legacy-internal-hero-about::before { background-image: url("/techsite-redesign/assets/legacy/page-header-about-us.jpg"); }
.techsite-redesign .legacy-services-hero::before { background-image: url("/techsite-redesign/assets/legacy/page-header-services.jpg"); }

/* The corner bracket from the home hero, reused as a quiet continuity cue. */
.techsite-redesign .legacy-internal-hero::after {
    width: 96px; height: 96px; position: absolute; inset-inline-end: 34px; bottom: 34px;
    border: 2px solid rgba(255,255,255,.22); border-inline-start: 0; border-block-start: 0;
    content: ""; pointer-events: none;
}

.techsite-redesign .legacy-internal-hero > div {
    width: var(--ts-container); margin: 0 auto; padding: 84px 0 76px;
    position: relative; display: flex; flex-direction: column;
}
.techsite-redesign .legacy-internal-hero h1 {
    order: 3; max-width: 18ch; margin: 0; color: #fff;
    font-size: clamp(48px, 5.4vw, 78px); font-weight: 700; letter-spacing: -.04em; line-height: .96;
}
html[dir="rtl"] .techsite-redesign .legacy-internal-hero h1 { letter-spacing: -.015em; line-height: 1.06; }
.techsite-redesign .legacy-internal-hero p { order: 4; max-width: 60ch; margin: 22px 0 0; color: var(--ts-faint); font-size: 20px; line-height: 1.6; }

.techsite-redesign .legacy-breadcrumbs {
    order: 1; align-self: stretch; margin: 0 0 28px; padding: 0 0 26px;
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.16);
    color: #8e9294; font: 12px/1.7 var(--ts-mono); letter-spacing: .14em;
    list-style: none; text-align: start; text-transform: uppercase;
}
.techsite-redesign .legacy-breadcrumbs li + li::before { margin-inline-end: 10px; content: "/"; }
.techsite-redesign .legacy-breadcrumbs a { color: var(--ts-red-soft); text-decoration: none; }
.techsite-redesign .legacy-breadcrumbs a:hover { color: #fff; }

/* Red rule marking the start of the content column, echoing .bindex-step-rule. */
.techsite-redesign .legacy-internal-hero > div::before {
    width: 56px; height: 3px; order: 0; margin-bottom: 26px; content: ""; background: var(--ts-red-soft);
}
.techsite-redesign .legacy-internal-hero .ts-kicker { order: 2; margin-bottom: 24px; }

/* Red hero used by the affiliate programme, mirroring the homepage hero. */
.techsite-redesign .legacy-affiliate-hero { min-height: 440px; background: var(--ts-red); }
.techsite-redesign .legacy-affiliate-hero::after { border-color: rgba(255,255,255,.34); }
.techsite-redesign .legacy-affiliate-hero > div { padding: 92px 0 88px; }
.techsite-redesign .legacy-affiliate-hero > div::before { background: #fff; }
.techsite-redesign .legacy-affiliate-hero .ts-kicker { color: rgba(255,255,255,.75); }
.techsite-redesign .legacy-affiliate-hero .legacy-breadcrumbs { border-bottom-color: rgba(255,255,255,.28); color: rgba(255,255,255,.66); }
.techsite-redesign .legacy-affiliate-hero .legacy-breadcrumbs a { color: #fff; }
.techsite-redesign .legacy-affiliate-hero h1 { max-width: 22ch; font-size: clamp(46px, 4.8vw, 66px); }
.techsite-redesign .legacy-affiliate-hero p { color: rgba(255,255,255,.84); }
.techsite-redesign .legacy-affiliate-hero .legacy-cta { background: var(--ts-ink); border-color: var(--ts-ink); }
.techsite-redesign .legacy-affiliate-hero .legacy-cta:hover { background: #000; border-color: #000; }
.techsite-redesign .legacy-hero-actions { order: 5; align-self: flex-start; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.techsite-redesign .legacy-hero-actions > a { min-height: 58px; padding-inline: 32px; }

/* ------------------------------------------------------- page content ---- */
.techsite-redesign .legacy-page-content { width: var(--ts-container); margin: 0 auto; padding: var(--ts-section) 0 calc(var(--ts-section) + 8px); }

/* The pre-redesign sheet centres this block and hangs a decorative red dash off
   it; both are cleared so inner-page headings match the homepage exactly. */
.techsite-redesign .legacy-page-heading {
    margin-bottom: 56px; padding-bottom: 48px;
    display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 60px; align-items: end;
    border-bottom: 1px solid var(--ts-line);
    color: var(--ts-text); font-size: 16px; font-weight: 400; text-align: start;
}
.techsite-redesign .legacy-page-heading::after { display: none; }
.techsite-redesign .legacy-page-heading > span { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.techsite-redesign .legacy-page-heading h2 { grid-column: 2; margin: 0; font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.techsite-redesign .legacy-page-heading p { grid-column: 2; margin: 20px 0 0; color: var(--ts-muted); font-size: 18px; line-height: 1.75; }

/* ------------------------------------------------------- theme catalogue -- */
.techsite-redesign .legacy-template-shell { width: var(--ts-container); margin: 0 auto; padding: 72px 0 var(--ts-section); display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.techsite-redesign .legacy-template-filter { padding: 0; position: sticky; top: 24px; background: transparent; border: 0; box-shadow: none; }
.techsite-redesign .legacy-template-filter h2 { margin: 0 0 8px; color: var(--ts-muted); font: 400 12px/1.6 var(--ts-mono); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.techsite-redesign .legacy-template-filter > div { display: flex; flex-direction: column; border-top: 1px solid var(--ts-line); }
.techsite-redesign .legacy-template-filter button {
    min-height: 50px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: var(--ts-text); background: transparent; border: 0; border-bottom: 1px solid var(--ts-line); border-radius: 0;
    font: 500 15px/1.3 var(--ts-sans); text-align: start; cursor: pointer;
    transition: color .18s ease, padding-inline .18s ease;
}
.techsite-redesign .legacy-template-filter button > small { color: var(--ts-faint); font: 400 12px/1 var(--ts-mono); }
.techsite-redesign .legacy-template-filter button:hover { color: var(--ts-red); }
.techsite-redesign .legacy-template-filter button[aria-pressed="true"] { color: var(--ts-ink); font-weight: 700; box-shadow: inset 3px 0 0 0 var(--ts-red); padding-inline-start: 14px; }
html[dir="rtl"] .techsite-redesign .legacy-template-filter button[aria-pressed="true"] { box-shadow: inset -3px 0 0 0 var(--ts-red); }
.techsite-redesign .legacy-template-filter button[aria-pressed="true"] > small { color: var(--ts-red); }

.techsite-redesign .legacy-catalog-count {
    margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--ts-line);
    color: var(--ts-muted); font: 400 12px/1.6 var(--ts-mono); letter-spacing: .16em; text-transform: uppercase;
}
.techsite-redesign .legacy-catalog-count strong { color: var(--ts-ink); font-weight: 600; }

.techsite-redesign .legacy-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px 26px; }
.techsite-redesign .legacy-catalog-card {
    min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--ts-line); border-radius: 0; box-shadow: none;
    transition: border-color .2s ease;
}
.techsite-redesign .legacy-catalog-card:hover { border-color: var(--ts-ink); }
.techsite-redesign .legacy-catalog-media { aspect-ratio: 1.5; position: relative; display: block; overflow: hidden; background: var(--ts-surface); }
/* The older sheet paints an untranslated hard-coded "View" overlay here. */
.techsite-redesign .legacy-catalog-media::after { content: none; display: none; }
.techsite-redesign .legacy-catalog-media img { width: 100%; height: 100%; display: block; aspect-ratio: auto; object-fit: cover; transition: transform .35s ease; }
.techsite-redesign .legacy-catalog-card:hover .legacy-catalog-media img { transform: scale(1.03); }
.techsite-redesign .legacy-catalog-copy { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.techsite-redesign .legacy-catalog-copy > span { color: var(--ts-red); font: 11px/1.3 var(--ts-mono); letter-spacing: .16em; text-transform: uppercase; }
.techsite-redesign .legacy-catalog-copy h3 { margin: 12px 0 8px; font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.techsite-redesign .legacy-catalog-copy p { margin: 0; color: var(--ts-muted); font-size: 14.5px; line-height: 1.65; }
/* Descriptions differ in length, so the meta rides the bottom of the card and
   the price rules line up across the row. */
.techsite-redesign .legacy-catalog-copy > p { margin-bottom: 24px; }
/* Three cards to a row leaves ~245px of copy width — not enough for a price
   and two buttons side by side, so the meta always stacks: price first, then
   the actions on their own full-width row. */
.techsite-redesign .legacy-catalog-meta { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; border-top: 1px solid var(--ts-line); }
.techsite-redesign .legacy-catalog-meta strong { color: var(--ts-ink); font-size: 14px; font-weight: 600; }

/* Price block: mono kicker, red numeral in the display scale, then a plain-
   language line saying what the figure buys. The numeral keeps LTR digit order
   in Arabic through <bdi>, and the whole block is read out as one sentence. */
/* min-height:0 undoes the 44px floor the older sheet puts on every card <p>. */
.techsite-redesign .legacy-catalog-copy .ts-catalog-price { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.techsite-redesign .ts-catalog-price-label {
    color: var(--ts-muted); font: 400 10px/1.4 var(--ts-mono);
    letter-spacing: .16em; text-transform: uppercase;
}
.techsite-redesign .ts-catalog-price-value { display: flex; align-items: baseline; gap: 5px; color: var(--ts-ink); }
.techsite-redesign .ts-catalog-price-amount { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.techsite-redesign .ts-catalog-price-currency { color: var(--ts-red); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.techsite-redesign .ts-catalog-price-note { color: var(--ts-muted); font-size: 12px; line-height: 1.5; }

/* Two actions per card: previewing is secondary, buying is the primary path. */
.techsite-redesign .legacy-catalog-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.techsite-redesign .legacy-catalog-actions > a { flex: 1; justify-content: center; }
.techsite-redesign .legacy-small-action-quiet { color: var(--ts-ink) !important; background: transparent; border-color: var(--ts-faint); }
.techsite-redesign .legacy-small-action-quiet:hover { color: #fff !important; background: var(--ts-ink); border-color: var(--ts-ink); }
.techsite-redesign .legacy-small-action-buy { color: #fff !important; background: var(--ts-red); border-color: var(--ts-red); }
.techsite-redesign .legacy-small-action-buy:hover { color: #fff !important; background: var(--ts-red-deep); border-color: var(--ts-red-deep); }

.techsite-redesign .legacy-catalog-empty {
    margin: 0; padding: 64px 30px; display: none;
    border: 1px solid var(--ts-line); color: var(--ts-muted); font-size: 17px; text-align: center;
}
.techsite-redesign .legacy-catalog-empty[data-catalog-empty="shown"] { display: block; }

/* ------------------------------------------------------------ services --- */
.techsite-redesign .legacy-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px; }
.techsite-redesign .legacy-service-card { min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
/* height:auto and inset:auto undo the fixed 250px crop and the gradient scrim
   the older sheet applied to this figure. */
.techsite-redesign .legacy-service-card figure { height: auto; margin: 0 0 24px; position: relative; overflow: hidden; }
.techsite-redesign .legacy-service-card figure::after {
    width: 56px; height: 56px; position: absolute; inset: auto auto 0 0;
    display: grid; place-items: center; color: #fff; background: var(--ts-red); content: "0";
    font: 500 13px/1 var(--ts-mono); transition: background-color .2s ease;
}
html[dir="rtl"] .techsite-redesign .legacy-service-card figure::after { inset: auto 0 0 auto; }
.techsite-redesign .legacy-service-card:nth-child(1) figure::after { content: "01"; }
.techsite-redesign .legacy-service-card:nth-child(2) figure::after { content: "02"; }
.techsite-redesign .legacy-service-card:nth-child(3) figure::after { content: "03"; }
.techsite-redesign .legacy-service-card:hover figure::after { background: var(--ts-ink); }
.techsite-redesign .legacy-service-card img { width: 100%; aspect-ratio: 1.45; display: block; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .3s ease, transform .4s ease; }
.techsite-redesign .legacy-service-card:hover img { filter: none; transform: scale(1.02); }
.techsite-redesign .legacy-service-card h3 { margin: 0 0 12px; position: static; color: var(--ts-ink); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-shadow: none; }
.techsite-redesign .legacy-service-card p { min-height: 0; margin: 0; padding: 0; color: var(--ts-muted); font-size: 16px; line-height: 1.75; }

/* ------------------------------------------------- numbered process grid -- */
/* gap:1px over a grey background was the old sheet's way of drawing dividers;
   this layer uses real hairline borders, so both are cleared. */
.techsite-redesign .legacy-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; background: transparent; border-top: 1px solid var(--ts-line); }
.techsite-redesign .legacy-process-grid article {
    min-height: 250px; min-width: 0; padding: 38px 34px;
    background: transparent; border: 0; border-bottom: 1px solid var(--ts-line); border-radius: 0; box-shadow: none;
    transition: background-color .2s ease;
}
.techsite-redesign .legacy-process-grid article + article { border-inline-start: 1px solid var(--ts-line); }
.techsite-redesign .legacy-process-grid article:hover { background: var(--ts-surface); }
.techsite-redesign .legacy-process-grid article > span { color: var(--ts-red); font: 500 13px/1 var(--ts-mono); letter-spacing: .14em; }
.techsite-redesign .legacy-process-grid h3 { margin: 44px 0 13px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.techsite-redesign .legacy-process-grid p { margin: 0; color: var(--ts-muted); font-size: 16px; line-height: 1.72; }

/* ------------------------------------------------------- bands, callout -- */
.techsite-redesign .legacy-highlight-band { padding: 90px max(24px, calc((100% - 1240px) / 2)); position: relative; color: #fff; background: var(--ts-dark); text-align: start; }
.techsite-redesign .legacy-highlight-band::before { width: 56px; height: 3px; margin-bottom: 26px; display: block; content: ""; background: var(--ts-red-soft); }
.techsite-redesign .legacy-highlight-band h2 { margin: 0 0 16px; color: #fff; font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.techsite-redesign .legacy-highlight-band p { max-width: 70ch; margin: 0; color: var(--ts-faint); font-size: 18px; line-height: 1.75; }

.techsite-redesign .legacy-affiliate-feedback-grid,
.techsite-redesign .legacy-affiliate-advantages-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 42px;
}
.techsite-redesign .legacy-affiliate-advantages-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.techsite-redesign .legacy-affiliate-feedback-grid blockquote,
.techsite-redesign .legacy-affiliate-advantages-grid article {
    margin: 0; padding: 0; border: 0; background: transparent;
}
.techsite-redesign .legacy-affiliate-feedback-grid p,
.techsite-redesign .legacy-affiliate-advantages-grid p {
    max-width: none; margin: 0; color: var(--ts-faint); font-size: 16px; line-height: 1.7;
}
.techsite-redesign .legacy-affiliate-advantages-grid h3 {
    margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}

.techsite-redesign .legacy-affiliate-table-wrap { overflow-x: auto; margin-top: 36px; border-top: 1px solid var(--ts-line); }
.techsite-redesign .legacy-affiliate-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.techsite-redesign .legacy-affiliate-table th,
.techsite-redesign .legacy-affiliate-table td {
    padding: 16px 18px; border-bottom: 1px solid var(--ts-line); text-align: start; font-size: 15px;
}
.techsite-redesign .legacy-affiliate-table th {
    color: var(--ts-muted); font: 500 12px/1.2 var(--ts-mono); letter-spacing: .12em; text-transform: uppercase;
}
.techsite-redesign .legacy-affiliate-table td { color: var(--ts-text); }
.techsite-redesign .legacy-affiliate-table tbody tr:nth-child(even) td { background: var(--ts-surface); }

.techsite-redesign .legacy-affiliate-video-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
}
.techsite-redesign .legacy-affiliate-video-grid h2 { margin: 0 0 14px; font-size: 36px; font-weight: 600; letter-spacing: -.03em; color: var(--ts-red); }
.techsite-redesign .legacy-affiliate-video-grid p { margin: 0; color: var(--ts-muted); font-size: 18px; line-height: 1.7; }
.techsite-redesign .legacy-affiliate-video-media video,
.techsite-redesign .legacy-affiliate-video-media iframe {
    width: 100%; display: block; background: var(--ts-ink); border: 1px solid var(--ts-line);
    aspect-ratio: 16 / 9;
}
.techsite-redesign .legacy-affiliate-video-media iframe { border: 0; }

@media (max-width: 960px) {
    .techsite-redesign .legacy-affiliate-feedback-grid,
    .techsite-redesign .legacy-affiliate-advantages-grid,
    .techsite-redesign .legacy-affiliate-video-grid { grid-template-columns: 1fr; gap: 22px; }
}

.techsite-redesign .legacy-callout {
    min-height: 180px; padding: 40px max(24px, calc((100% - 1240px) / 2));
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    background: var(--ts-surface); border-top: 1px solid var(--ts-line-warm); color: var(--ts-text);
}
.techsite-redesign .legacy-callout h2 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.techsite-redesign .legacy-callout p { max-width: 62ch; margin: 9px 0 0; color: var(--ts-muted); font-size: 16px; }
.techsite-redesign .legacy-callout .legacy-cta { flex: 0 0 auto; }

/* ----------------------------------------------------------- rich copy --- */
.techsite-redesign .legacy-rich-copy > h2 { margin: 0 0 26px; font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.techsite-redesign .legacy-rich-copy > h3 { margin: 52px 0 20px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.techsite-redesign .legacy-rich-copy > p { max-width: 72ch; margin: 0 0 20px; color: var(--ts-muted); font-size: 18px; line-height: 1.8; }
.techsite-redesign .legacy-rich-copy .legacy-process-grid { margin: 50px 0; }

.techsite-redesign .legacy-rich-copy ul,
.techsite-redesign .legacy-application-list { max-width: 72ch; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--ts-line); list-style: none; }
.techsite-redesign .legacy-rich-copy li,
.techsite-redesign .legacy-application-list li {
    padding: 18px 0 18px 34px; position: relative;
    border-bottom: 1px solid var(--ts-line); color: var(--ts-text); font-size: 17px; line-height: 1.65;
}
html[dir="rtl"] .techsite-redesign .legacy-rich-copy li,
html[dir="rtl"] .techsite-redesign .legacy-application-list li { padding: 18px 34px 18px 0; }
.techsite-redesign .legacy-rich-copy li::before,
.techsite-redesign .legacy-application-list li::before { width: 16px; height: 2px; position: absolute; inset-inline-start: 0; top: 30px; content: ""; background: var(--ts-red); }

/* ----------------------------------------------------------- about page -- */
.techsite-redesign .legacy-about-layout { display: grid; grid-template-columns: 348px 1fr; gap: 70px; align-items: start; }
.techsite-redesign .legacy-about-card {
    padding: 42px 38px; position: sticky; top: 32px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    color: #fff; background: var(--ts-red); border-radius: 0; box-shadow: none; text-align: start;
}
.techsite-redesign .legacy-about-card h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.4; }
.techsite-redesign .legacy-about-card strong { font-size: 17px; }
.techsite-redesign .legacy-about-card p { margin: 0 0 12px; color: rgba(255,255,255,.84); font-size: 15.5px; line-height: 1.7; }
.techsite-redesign .legacy-about-card > span { color: rgba(255,255,255,.72); font: 11.5px/1.4 var(--ts-mono); letter-spacing: .2em; text-transform: uppercase; }
.techsite-redesign .legacy-about-card > a:not(.legacy-outline-action) { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.techsite-redesign .legacy-about-card > a:not(.legacy-outline-action):hover { text-decoration: underline; text-underline-offset: 5px; }
.techsite-redesign .legacy-about-card .legacy-outline-action { align-self: stretch; margin-top: 4px; color: #fff !important; background: transparent; border: 1px solid rgba(255,255,255,.6); font-size: 14px; }
.techsite-redesign .legacy-about-card .legacy-outline-action:hover { color: var(--ts-red) !important; background: #fff; border-color: #fff; }

/* -------------------------------------------------------- plan pricing --- */
.techsite-redesign .legacy-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 24px; }
.techsite-redesign .legacy-price-grid-page { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.ts-plan-card {
    min-width: 0; padding-bottom: 36px; display: flex; flex-direction: column;
    color: var(--ts-ink); background: #fff; border: 1px solid var(--ts-line); border-radius: 0;
}
.ts-plan-card.is-featured { position: relative; color: #fff; background: var(--ts-ink); border-color: var(--ts-ink); }
.ts-plan-card.is-featured::before { height: 3px; position: absolute; inset-inline: 0; top: 0; content: ""; background: var(--ts-red); }
.ts-plan-card > header { padding: 36px 34px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ts-plan-card h3 { margin: 0; color: inherit; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ts-plan-card header > span { color: var(--ts-muted); font: 12px/1.3 var(--ts-mono); white-space: nowrap; }
.ts-plan-card.is-featured header > span { color: var(--ts-red-soft); }
.ts-plan-price { padding: 24px 34px 28px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ts-plan-price strong { font-size: 68px; font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.ts-plan-price b { font-size: 17px; font-weight: 600; }
.ts-plan-price small { margin-inline-start: 5px; color: var(--ts-muted); font-size: 14px; }
.ts-plan-card.is-featured .ts-plan-price small { color: var(--ts-faint); }
.ts-plan-card ul { margin: 0; padding: 0 34px; list-style: none; }
.ts-plan-card li { padding: 14px 0; border-top: 1px solid var(--ts-line); font-size: 15.5px; line-height: 1.5; }
.ts-plan-card.is-featured li { border-color: var(--ts-line-dark); }
.ts-plan-card > .ts-button { margin: 32px 34px 0; align-self: stretch; }
.techsite-redesign .legacy-empty-state,
.techsite-redesign .legacy-catalog-empty { border: 1px solid var(--ts-line); }
.techsite-redesign .legacy-empty-state { margin: 0; padding: 48px 30px; background: transparent; color: var(--ts-muted); font-size: 17px; text-align: center; }

/* ------------------------------------------------ buy: choose a plan ----- */
/* Step one of the purchase journey. Mirrors the templates page shell so the
   customer stays in the same spatial system while narrowing from theme to plan. */
.techsite-redesign .ts-buy-shell {
    width: var(--ts-container); margin: 0 auto; padding: 72px 0 var(--ts-section);
    display: grid; grid-template-columns: 348px 1fr; gap: 70px; align-items: start;
}
.techsite-redesign .ts-buy-theme { position: sticky; top: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.techsite-redesign .ts-buy-theme img { width: 100%; margin: 20px 0 0; display: block; aspect-ratio: 1.5; object-fit: cover; border: 1px solid var(--ts-line); }
.techsite-redesign .ts-buy-theme-label { margin: 22px 0 0; color: var(--ts-muted); font: 400 11px/1.4 var(--ts-mono); letter-spacing: .18em; text-transform: uppercase; }
.techsite-redesign .ts-buy-theme h2 { margin: 10px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.techsite-redesign .ts-buy-theme-copy { margin: 12px 0 24px; color: var(--ts-muted); font-size: 15.5px; line-height: 1.7; }
.techsite-redesign .ts-buy-theme .button { align-self: stretch; }
.techsite-redesign .ts-buy-plans { min-width: 0; }

/* The supplement is what a bare price list hides, so each plan shows its sum. */
.techsite-redesign .ts-buy-breakdown { margin: 24px 34px 0; padding-top: 18px; display: grid; gap: 9px; border-top: 1px solid var(--ts-line); }
.techsite-redesign .ts-plan-card.is-featured .ts-buy-breakdown { border-top-color: var(--ts-line-dark); }
.techsite-redesign .ts-buy-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.techsite-redesign .ts-buy-breakdown dt { color: var(--ts-muted); font-size: 13.5px; }
.techsite-redesign .ts-plan-card.is-featured .ts-buy-breakdown dt { color: var(--ts-faint); }
.techsite-redesign .ts-buy-breakdown dd { margin: 0; color: inherit; font-size: 13.5px; font-weight: 600; text-align: end; }
.techsite-redesign .ts-buy-breakdown .is-total { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--ts-line); }
.techsite-redesign .ts-plan-card.is-featured .ts-buy-breakdown .is-total { border-top-color: var(--ts-line-dark); }
.techsite-redesign .ts-buy-breakdown .is-total dt { color: inherit; font-size: 14px; font-weight: 600; }
.techsite-redesign .ts-buy-breakdown .is-total dd { font-size: 17px; }

/* ==========================================================================
   Forms — sign in, register, checkout, order, affiliate application.
   ========================================================================== */
.techsite-redesign .form-shell { width: auto; min-height: 620px; max-width: none; margin: 0; padding: 84px 24px var(--ts-section); background: var(--ts-surface); }
.techsite-redesign .form-panel {
    width: min(720px, 100%); margin: 0 auto; padding: 0;
    background: #fff; border: 1px solid var(--ts-line); border-top: 3px solid var(--ts-red); border-radius: 0; box-shadow: none;
}
/* Every direct child is inset by one gutter, so the panel needs no padding of
   its own and full-bleed rules (summary lines, hairlines) stay possible. */
.techsite-redesign .form-panel > * { margin-inline: var(--ts-panel-gutter); }
.techsite-redesign .form-panel { --ts-panel-gutter: clamp(24px, 5vw, 56px); }
.techsite-redesign .form-panel-wide { width: min(980px, 100%); }
.techsite-redesign .affiliate-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}
.techsite-redesign .affiliate-register-form .field { margin-inline: 0; }
.techsite-redesign .affiliate-register-form > .button { margin-top: 28px; }
@media (max-width: 800px) {
    .techsite-redesign .affiliate-register-grid { grid-template-columns: 1fr; }
}
.techsite-redesign .form-panel > * + * { margin-top: 22px; }
.techsite-redesign .form-panel > .eyebrow { margin-top: 48px; }
.techsite-redesign .form-panel > .eyebrow + h1 { margin-top: 14px; }
.techsite-redesign .form-panel h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 0; }
.techsite-redesign .form-panel h2 { margin-top: 40px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.techsite-redesign .form-panel > p { max-width: 62ch; color: var(--ts-muted); font-size: 16px; line-height: 1.75; }
.techsite-redesign .form-panel > *:last-child { margin-bottom: 48px; }
.techsite-redesign .form-panel > input[type="hidden"] { display: none; }
.techsite-redesign .phone-row { display: grid; grid-template-columns: minmax(9rem, 11rem) 1fr; gap: 10px; }
.techsite-redesign .field-check label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.techsite-redesign .field-check input[type="checkbox"] { width: auto; margin: 0; }
.techsite-redesign .mlm-fields:not([hidden]) { display: contents; }

.techsite-redesign .field { margin: 24px var(--ts-panel-gutter, clamp(24px, 5vw, 56px)) 0; display: grid; gap: 9px; }
.techsite-redesign .field > label,
.techsite-redesign .form-panel label { color: var(--ts-ink); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.techsite-redesign .field input,
.techsite-redesign .field select,
.techsite-redesign .field textarea,
.techsite-redesign .form-panel input:not([type="checkbox"]):not([type="radio"]),
.techsite-redesign .form-panel select,
.techsite-redesign .form-panel textarea {
    width: 100%; min-height: 52px; padding: 13px 15px;
    color: var(--ts-ink); background: #fff; border: 1px solid #cdcac5; border-radius: 0; font: inherit;
    transition: border-color .18s ease;
}
.techsite-redesign .field textarea, .techsite-redesign .form-panel textarea { min-height: 120px; resize: vertical; }
.techsite-redesign .field input:focus,
.techsite-redesign .field select:focus,
.techsite-redesign .field textarea:focus,
.techsite-redesign .form-panel input:focus,
.techsite-redesign .form-panel select:focus,
.techsite-redesign .form-panel textarea:focus { border-color: var(--ts-red); outline: 3px solid rgba(202,32,39,.2); outline-offset: 0; }
.techsite-redesign .field input::placeholder, .techsite-redesign .form-panel textarea::placeholder { color: var(--ts-faint); }

.techsite-redesign .validation { color: var(--ts-red-deep); font-size: 13.5px; }
.techsite-redesign .validation:empty { display: none; }
.techsite-redesign .form-hint { color: var(--ts-muted); font-size: 14px; line-height: 1.7; }

.techsite-redesign .form-message {
    margin: 24px var(--ts-panel-gutter, clamp(24px, 5vw, 56px)) 0; padding: 16px 18px;
    background: #fdf1f1; border: 0; border-inline-start: 3px solid var(--ts-red);
    color: var(--ts-red-deep); font-size: 15px; line-height: 1.6;
}
.techsite-redesign .form-message--info { background: var(--ts-surface); border-inline-start-color: var(--ts-ink); color: var(--ts-text); }
.techsite-redesign .form-message.validation-summary-valid, .techsite-redesign .form-message:empty { display: none; }
.techsite-redesign .form-message ul { margin: 0; padding-inline-start: 18px; }

.techsite-redesign .summary-line {
    margin-inline: var(--ts-panel-gutter, clamp(24px, 5vw, 56px)); padding: 16px 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    border-bottom: 1px solid var(--ts-line);
}
.techsite-redesign .summary-line:first-of-type { border-top: 1px solid var(--ts-line); }
.techsite-redesign .summary-line > span { color: var(--ts-muted); font: 400 11.5px/1.5 var(--ts-mono); letter-spacing: .16em; text-transform: uppercase; }
.techsite-redesign .summary-line > strong { color: var(--ts-ink); font-size: 16.5px; font-weight: 600; text-align: end; }
.techsite-redesign .summary-line--total { border-bottom-width: 2px; border-bottom-color: var(--ts-ink); }
.techsite-redesign .summary-line--total > strong { color: var(--ts-red); font-size: 22px; letter-spacing: -.02em; }
/* Escape hatch back to plan selection, kept quiet so it never competes with pay. */
.techsite-redesign .checkout-change-plan { margin: 14px 0 0; font-size: 14px; }

/* Order status reads as a state, not as another value in the summary. */
.techsite-redesign .legacy-order-status {
    padding: 5px 12px; display: inline-flex; align-items: center; gap: 8px;
    background: var(--ts-surface); border: 1px solid var(--ts-line);
    font-size: 12.5px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.techsite-redesign .legacy-order-status::before { width: 7px; height: 7px; content: ""; background: var(--ts-faint); }
.techsite-redesign .legacy-order-status--paid { color: #0b6b3a; background: #eaf6ef; border-color: #bfe0cc; }
.techsite-redesign .legacy-order-status--paid::before { background: #0b6b3a; }
.techsite-redesign .legacy-order-status--pending { color: #8a5a12; background: #fff8ec; border-color: #ecd7b0; }
.techsite-redesign .legacy-order-status--pending::before { background: #b8791a; }
.techsite-redesign .legacy-order-status--failed,
.techsite-redesign .legacy-order-status--cancelled { color: var(--ts-red-deep); background: #fdf1f1; border-color: #f1cdcd; }
.techsite-redesign .legacy-order-status--failed::before,
.techsite-redesign .legacy-order-status--cancelled::before { background: var(--ts-red); }
.techsite-redesign .legacy-order-status--refunded { color: #3d4a5c; background: #f1f4f8; border-color: #cdd6e1; }
.techsite-redesign .legacy-order-status--refunded::before { background: #6b7c90; }

/* Account order detail — title + status header, then a single summary block. */
.techsite-redesign .form-panel.order-panel > .order-header {
    margin-top: 48px;
    margin-inline: var(--ts-panel-gutter);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 28px;
}
.techsite-redesign .order-header__copy { min-width: 0; flex: 1; }
.techsite-redesign .order-header__copy .eyebrow { margin: 0; }
.techsite-redesign .order-header__copy h1 {
    margin: 12px 0 0;
    max-width: 22em;
    font-size: clamp(28px, 3.6vw, 38px);
    line-height: 1.15;
}
.techsite-redesign .order-header > .legacy-order-status {
    margin-top: 2px;
    flex-shrink: 0;
    align-self: flex-start;
}
.techsite-redesign .form-panel.order-panel > .order-summary {
    margin-top: 34px;
    margin-inline: 0;
    padding: 8px 0 4px;
    background: var(--ts-surface);
    border-block: 1px solid var(--ts-line);
}
.techsite-redesign .order-summary > .summary-line {
    margin-inline: var(--ts-panel-gutter);
    margin-top: 0;
}
.techsite-redesign .order-summary > .summary-line:first-of-type { border-top: 0; }
.techsite-redesign .order-summary > .summary-line:last-child { border-bottom: 0; }
.techsite-redesign .order-summary > .summary-line--total {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--ts-line);
    border-bottom: 0;
}
.techsite-redesign .order-summary .summary-line > strong small {
    margin-inline-start: 6px;
    color: var(--ts-muted);
    font-size: 13px;
    font-weight: 500;
}
.techsite-redesign .form-panel.order-panel > .order-actions {
    margin-top: 28px;
    margin-inline: var(--ts-panel-gutter);
    margin-bottom: 48px;
    display: grid;
    gap: 18px;
}
.techsite-redesign .order-actions > .button,
.techsite-redesign .order-actions > form > .button {
    width: 100%;
    justify-content: center;
}
.techsite-redesign .order-actions > form { margin: 0; }
.techsite-redesign .order-actions .form-hint { margin: 0; }
.techsite-redesign .order-actions__back { margin: 0; }
.techsite-redesign .order-actions__back a { font-size: 14.5px; font-weight: 600; }

.techsite-redesign .site-address-input { display: flex; align-items: stretch; direction: ltr; }
.techsite-redesign .site-address-input input { border-radius: 0 !important; border-inline-end: 0; }
.techsite-redesign .site-address-input span {
    padding: 0 16px; display: flex; align-items: center; white-space: nowrap;
    color: var(--ts-faint); background: var(--ts-ink); border: 1px solid var(--ts-ink);
    font: 400 13px/1 var(--ts-mono);
}

.techsite-redesign .account-form-options {
    margin: 26px var(--ts-panel-gutter, clamp(24px, 5vw, 56px)) 0; padding-top: 22px;
    display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px 18px;
    border-top: 1px solid var(--ts-line); font-size: 14px;
}
.techsite-redesign .account-form-options label { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.techsite-redesign .account-form-options input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ts-red); }
.techsite-redesign .account-form-options a { color: var(--ts-red); font-weight: 600; }
.techsite-redesign .account-form-submit { margin: 28px var(--ts-panel-gutter, clamp(24px, 5vw, 56px)) 0; }
/* Matches the specificity of .legacy-public .form-panel .button in the older sheet. */
.techsite-redesign .form-panel .button,
.techsite-redesign .form-shell .button {
    min-height: 54px; color: #fff !important; background: var(--ts-red);
    border: 1px solid var(--ts-red); border-radius: 0; font-size: 15px !important;
}
.techsite-redesign .form-panel .button:hover,
.techsite-redesign .form-shell .button:hover { background: var(--ts-red-deep); border-color: var(--ts-red-deep); }
.techsite-redesign .form-panel .button-secondary,
.techsite-redesign .form-shell .button-secondary { color: var(--ts-ink) !important; background: transparent; border-color: var(--ts-ink); }
.techsite-redesign .form-panel .button-secondary:hover,
.techsite-redesign .form-shell .button-secondary:hover { color: #fff !important; background: var(--ts-ink); border-color: var(--ts-ink); }
.techsite-redesign .form-panel > .button,
.techsite-redesign .form-panel > button { margin-top: 32px; }
.techsite-redesign .form-panel .hero-actions,
.techsite-redesign .form-panel .legacy-error-actions { margin: 30px var(--ts-panel-gutter, clamp(24px, 5vw, 56px)) 0; display: flex; flex-wrap: wrap; gap: 14px; }
.techsite-redesign .form-panel .hero-actions > .button,
.techsite-redesign .form-panel .legacy-error-actions > .button { margin: 0; }

/* ---------------------------------------------------------- legal, error -- */
.techsite-redesign .legal-page { width: min(820px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 84px 0 var(--ts-section); }
.techsite-redesign .legal-page .legal-updated {
    margin: 0 0 44px; padding-bottom: 22px; border-bottom: 1px solid var(--ts-line);
    color: var(--ts-red); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
}
.techsite-redesign .legal-page h2 { margin: 48px 0 14px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.techsite-redesign .legal-page h2:first-of-type { margin-top: 0; }
.techsite-redesign .legal-page p { max-width: 74ch; color: var(--ts-muted); font-size: 17px; line-height: 1.85; }

.techsite-redesign .legacy-error-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.techsite-redesign .legacy-error-reference { margin: 0; color: var(--ts-muted); font-size: 15px; }
.techsite-redesign .legacy-error-reference code { padding: 3px 8px; background: var(--ts-surface); border: 1px solid var(--ts-line); font-family: var(--ts-mono); font-size: 13px; }

/* --------------------------------------------------------------- footer -- */
/* Beat .site-footer / .legacy-footer-inner column+grid rules so the row layout wins. */
.techsite-redesign.legacy-public .ts-footer,
.techsite-redesign .ts-footer {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    gap: 0;
    color: #8e9294;
    background: var(--ts-ink);
    grid-template-columns: none;
}
.techsite-redesign .ts-footer > .legacy-footer-inner,
.techsite-redesign .ts-footer .legacy-footer-inner {
    box-sizing: border-box;
    width: var(--ts-container);
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    padding: 56px 0 40px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 72px;
    border-bottom: 1px solid #1f2325;
    grid-template-columns: none;
}
.techsite-redesign .ts-footer .legacy-footer-brand {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    text-align: start;
}
.techsite-redesign .ts-footer .legacy-footer-brand img {
    width: 150px;
    height: 35px;
    object-fit: contain;
}
.techsite-redesign .ts-footer .ts-footer-meta,
.techsite-redesign .ts-footer .legacy-footer-inner > .ts-footer-meta {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0 48px;
    margin: 0;
    margin-inline-start: auto;
    font-size: 14px;
}
.techsite-redesign .ts-footer .ts-footer-legal {
    display: inline-flex;
    align-items: center;
    min-height: 1.4em;
    padding-top: 0;
    color: #8e9294;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}
.techsite-redesign .ts-footer .ts-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
}
.techsite-redesign .ts-footer strong {
    color: #fff;
    font: 500 11.5px/1.4 var(--ts-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.techsite-redesign .ts-footer a { color: #8e9294; text-decoration: none; }
.techsite-redesign .ts-footer a:hover { color: var(--ts-red-soft); }
.techsite-redesign .ts-sprite { display: none; }
.techsite-redesign .ts-footer-line { display: inline-flex; align-items: center; gap: 8px; }
.techsite-redesign .ts-footer-phone { color: var(--ts-red-soft); font-weight: 500; white-space: nowrap; }
.techsite-redesign .ts-footer-phone:hover { color: #fff; }
.techsite-redesign .ts-footer-email .ts-footer-mail { stroke: var(--ts-red); }
.techsite-redesign .ts-footer-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.techsite-redesign .ts-footer-social .ts-footer-icon { fill: currentColor; stroke: none; }
.techsite-redesign .ts-footer-glyph { width: 16px; height: 16px; flex: 0 0 auto; fill: var(--ts-red); }
.techsite-redesign .ts-footer-line:hover .ts-footer-glyph { fill: var(--ts-red-soft); }

.techsite-redesign .ts-footer > .ts-footer-bottom,
.techsite-redesign .ts-footer .ts-footer-bottom {
    box-sizing: border-box;
    width: var(--ts-container);
    max-width: 100%;
    margin-inline: auto;
    padding: 22px 0 40px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
}
.techsite-redesign .ts-footer-copyright { margin: 0; color: #7d8183; font-family: var(--ts-mono); font-size: 12.5px; letter-spacing: .06em; }
.techsite-redesign .ts-footer-reach {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    font-size: 14px;
}
.techsite-redesign .ts-footer-social { margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; list-style: none; }
.techsite-redesign .ts-footer-social a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #b7bbbd;
    border: 1px solid #24282a;
}
.techsite-redesign .ts-footer-social a:hover { color: #fff; background: var(--ts-red); border-color: var(--ts-red); }
.techsite-redesign .ts-back-top {
    position: absolute;
    /* Sit above the social row so the control does not cover the first icon. */
    inset-block-end: 96px;
    inset-inline-end: max(16px, calc((100% - var(--ts-container)) / 2));
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #c5c9cb;
    background: #2a2e31;
    border: 1px solid #34383b;
}
.techsite-redesign .ts-back-top:hover { color: #fff; background: var(--ts-red); border-color: var(--ts-red); }
.techsite-redesign .ts-back-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    :root { --ts-container: min(100% - 40px, 1040px); --ts-section: 88px; }
    .techsite-redesign .public-nav { gap: 12px; font-size: 13px; }
    .techsite-redesign .public-nav .button { padding-inline: 18px; }
    .bindex-hero-copy h1, .bindex-hero-copy h2 { font-size: clamp(60px, 7.4vw, 96px); }
    .bindex-facts { gap: 24px; }
    .bindex-facts > a { max-width: 250px; }
    .techsite-redesign .legacy-catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .techsite-redesign .legacy-template-shell { grid-template-columns: 200px 1fr; gap: 42px; }
    .techsite-redesign .legacy-about-layout { grid-template-columns: 300px 1fr; gap: 48px; }
    .techsite-redesign .ts-buy-shell { grid-template-columns: 300px 1fr; gap: 48px; }
}

@media (max-width: 1024px) {
    .techsite-redesign .ts-header, .techsite-redesign .ts-header .legacy-header-inner { height: 78px; min-height: 78px; }
    .techsite-redesign .nav-toggle { display: grid; }
    .techsite-redesign .public-nav {
        width: 100%; padding: 16px 20px 24px; position: absolute; inset-inline: 0; top: 78px; z-index: 70;
        display: none; align-items: stretch; flex-direction: column; gap: 0;
        background: var(--ts-dark); border-top: 1px solid var(--ts-line-dark); box-shadow: 0 20px 30px rgba(0,0,0,.22);
        font-size: 15px;
    }
    /* The older sheet pins the RTL nav to 14px at a higher specificity, so the
       collapsed panel would otherwise read smaller in Arabic than in English. */
    html[dir="rtl"] .techsite-redesign .public-nav { font-size: 15px; }
    .techsite-redesign .public-nav.is-open { display: flex; }
    .techsite-redesign .public-nav > a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .techsite-redesign .public-nav > a:not(.button)::after { display: none; }
    .techsite-redesign .public-nav .button { width: 100%; margin-top: 16px; border-bottom: 0; }
}

@media (max-width: 900px) {
    :root { --ts-container: calc(100% - 36px); }
    .techsite-redesign .legacy-contact-links > a:last-child { display: none; }
    .bindex-hero-stage { min-height: 88vh; }
    .bindex-hero-copy { min-height: 88vh; padding-block: 120px 170px; }
    .bindex-hero-controls { inset-block-end: 46px; align-items: flex-start; flex-direction: column; }
    .bindex-facts { padding-block: 30px; flex-wrap: wrap; justify-content: flex-start; }
    .bindex-facts > a { width: 100%; max-width: none; margin-inline-start: 0; padding-top: 20px; border-top: 1px solid var(--ts-line-dark); }
    .bindex-section-heading { grid-template-columns: 1fr; gap: 24px; }
    .bindex-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 28px; }
    .bindex-steps article:nth-child(n) { margin-top: 0; }
    .bindex-feature-list { grid-template-columns: 1fr; }
    .bindex-stats .ts-container > div { grid-template-columns: repeat(2,1fr); }
    .bindex-countdown > .ts-container { align-items: flex-start; flex-direction: column; }
    .bindex-contact > .ts-container { grid-template-columns: 1fr; gap: 28px; }
    .bindex-contact-panel { padding: 32px; }
    .bindex-map,
    .bindex-map iframe { min-height: 320px; }

    .techsite-redesign .legacy-page-heading { grid-template-columns: 1fr; gap: 20px; }
    .techsite-redesign .legacy-page-heading > span,
    .techsite-redesign .legacy-page-heading h2,
    .techsite-redesign .legacy-page-heading p { grid-column: 1; grid-row: auto; }
    .techsite-redesign .legacy-template-shell { grid-template-columns: 1fr; gap: 38px; }
    .techsite-redesign .legacy-template-filter { position: static; }
    .techsite-redesign .legacy-template-filter > div { flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 0; }
    .techsite-redesign .legacy-template-filter button { min-height: 44px; padding-inline: 16px; border: 1px solid var(--ts-line); }
    .techsite-redesign .legacy-template-filter button[aria-pressed="true"] { color: #fff; background: var(--ts-ink); border-color: var(--ts-ink); box-shadow: none; padding-inline: 16px; }
    .techsite-redesign .legacy-template-filter button[aria-pressed="true"] > small { color: rgba(255,255,255,.7); }
    .techsite-redesign .legacy-service-grid { grid-template-columns: 1fr; }
    .techsite-redesign .legacy-process-grid { grid-template-columns: 1fr; }
    .techsite-redesign .legacy-process-grid article + article { border-inline-start: 0; }
    .techsite-redesign .legacy-about-layout { grid-template-columns: 1fr; }
    .techsite-redesign .legacy-about-card { width: min(520px, 100%); position: static; }
    .techsite-redesign .ts-buy-shell { grid-template-columns: 1fr; gap: 44px; }
    .techsite-redesign .ts-buy-theme { width: min(520px, 100%); position: static; }
    .techsite-redesign .ts-footer > .legacy-footer-inner,
    .techsite-redesign .ts-footer .legacy-footer-inner {
        flex-wrap: wrap;
        gap: 28px 40px;
    }
    .techsite-redesign .ts-footer .ts-footer-meta,
    .techsite-redesign .ts-footer .legacy-footer-inner > .ts-footer-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px 36px;
    }
}

@media (max-width: 620px) {
    :root { --ts-container: calc(100% - 32px); --ts-section: 72px; }
    .techsite-redesign .ts-topbar { min-height: 42px; }
    .techsite-redesign .ts-topbar .legacy-topline-inner { min-height: 42px; }
    .techsite-redesign .legacy-contact-links { display: none; }
    .techsite-redesign .legacy-account-links { width: 100%; justify-content: space-between; gap: 14px; }
    .techsite-redesign .legacy-account-links > a { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
    .techsite-redesign .legacy-logo img { width: 144px; height: 34px; }

    .bindex-hero-stage,
    .bindex-hero-copy { min-height: 80vh; }
    .bindex-hero-copy { padding-block: 108px 164px; }
    .bindex-hero-kicker { gap: 14px; font-size: 11px; letter-spacing: .18em; }
    .bindex-hero-kicker::before,
    .bindex-hero-kicker::after { width: 44px; height: 10px; }
    .bindex-hero-copy h1, .bindex-hero-copy h2,
    html[dir="rtl"] .bindex-hero-copy h1, html[dir="rtl"] .bindex-hero-copy h2 { max-width: 12ch; font-size: clamp(42px, 14vw, 72px); line-height: .96; }
    .bindex-hero-copy > p { font-size: 18px; }
    .bindex-hero-actions { align-items: stretch; flex-direction: column; }
    .bindex-button { width: 100%; }
    .bindex-hero-controls { inset-block-end: 34px; }
    .bindex-slide-arrow { width: 48px; height: 48px; }
    .bindex-facts { gap: 18px; }
    .bindex-facts > div { width: 100%; justify-content: space-between; }
    .bindex-how > .ts-container, .bindex-features > .ts-container, .bindex-pricing > .ts-container,
    .bindex-customers > .ts-container, .bindex-contact > .ts-container { padding-block: 78px; }
    .bindex-section-heading h2, .bindex-pricing-heading h2 { font-size: 38px; }
    .bindex-steps { margin-top: 54px; grid-template-columns: 1fr; }
    .bindex-steps article > img { aspect-ratio: 1.15; }
    .bindex-video { margin-top: 40px; }
    .bindex-video > .ts-container { padding-block: 96px; }
    .bindex-video h2 { font-size: 42px; }
    .bindex-video div > a { width: 82px; height: 82px; }
    .bindex-feature-list article { grid-template-columns: 1fr 40px; gap: 14px; }
    .bindex-feature-list h3 { font-size: 20px; }
    .bindex-pricing-heading h2 { font-size: 38px; }
    .bindex-pricing-heading p { font-size: 16px; }
    .bindex-plan-showcase { grid-template-columns: 1fr; gap: 16px; }
    .bindex-plan-card { padding: 28px 24px 28px; }
    .bindex-plan-card-head > strong { font-size: 44px; }
    .bindex-plan-card-features li { font-size: 14px; }
    .bindex-plan-matrix { min-width: 780px; }
    .bindex-stats > .ts-container { padding-block: 72px; }
    .bindex-stats header { align-items: flex-start; flex-direction: column; }
    .bindex-stats h2 { font-size: 36px; }
    .bindex-stats .ts-container > div { gap: 38px 24px; }
    .bindex-stats strong { font-size: 52px; }
    .bindex-countdown .ts-container > div { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 28px 20px; }
    .bindex-countdown strong { font-size: 40px; }
    .bindex-customers h2 { font-size: 32px; }
    .bindex-brand-row img { width: 72px; height: 42px; }
    .bindex-affiliate > .ts-container { padding-block: 38px; align-items: flex-start; flex-direction: column; gap: 28px; }
    .bindex-contact-row, .bindex-contact-details { grid-template-columns: 1fr; }
    .bindex-contact-row label + label { margin-top: 16px; }
    .bindex-contact-panel { padding: 28px 24px; }
    .bindex-contact-panel h2 { font-size: 36px; margin-bottom: 24px; }
    .bindex-contact-details > div + div { border-inline-start: 0; border-block-start: 1px solid var(--ts-line); }
    .bindex-map,
    .bindex-map iframe { min-height: 280px; }

    .techsite-redesign .legacy-internal-hero { min-height: 280px; }
    .techsite-redesign .legacy-internal-hero::after { display: none; }
    .techsite-redesign .legacy-internal-hero > div { padding: 58px 0 56px; }
    .techsite-redesign .legacy-internal-hero > div::before { margin-bottom: 20px; }
    .techsite-redesign .legacy-internal-hero h1 { max-width: none; font-size: clamp(36px, 11vw, 48px); }
    .techsite-redesign .legacy-internal-hero p { font-size: 17px; }
    .techsite-redesign .legacy-breadcrumbs { margin-bottom: 22px; padding-bottom: 20px; }
    .techsite-redesign .legacy-affiliate-hero { min-height: 340px; }
    .techsite-redesign .legacy-affiliate-hero > div { padding: 58px 0 56px; }
    .techsite-redesign .legacy-hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .techsite-redesign .legacy-hero-actions > a { width: 100%; }
    .techsite-redesign .legacy-page-heading h2 { font-size: 34px; }
    .techsite-redesign .legacy-page-heading p { font-size: 16px; }
    .techsite-redesign .legacy-template-shell { padding: 48px 0 var(--ts-section); }
    .techsite-redesign .legacy-catalog-grid { grid-template-columns: 1fr; }
    .techsite-redesign .legacy-catalog-meta { align-items: stretch; flex-direction: column; gap: 16px; }
    .techsite-redesign .legacy-catalog-actions > a { flex: 1; }
    .techsite-redesign .ts-buy-shell { padding: 48px 0 var(--ts-section); }
    .techsite-redesign .ts-buy-theme h2 { font-size: 26px; }
    .techsite-redesign .legacy-highlight-band { padding-block: 66px; }
    .techsite-redesign .legacy-highlight-band h2 { font-size: 32px; }
    .techsite-redesign .legacy-callout { padding-block: 46px; align-items: flex-start; flex-direction: column; gap: 26px; }
    .techsite-redesign .legacy-callout h2 { font-size: 28px; }
    .techsite-redesign .legacy-callout .legacy-cta { width: 100%; }
    .techsite-redesign .legacy-rich-copy > h2 { font-size: 32px; }
    .techsite-redesign .legacy-rich-copy > h3 { font-size: 24px; }
    .techsite-redesign .legacy-rich-copy > p { font-size: 16.5px; }
    .techsite-redesign .ts-plan-price strong { font-size: 58px; }
    .techsite-redesign .form-shell { padding: 48px 16px 72px; }
    .techsite-redesign .form-panel > .eyebrow { margin-top: 38px; }
    .techsite-redesign .form-panel > *:last-child { margin-bottom: 38px; }
    .techsite-redesign .form-panel.order-panel > .order-header {
        margin-top: 38px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .techsite-redesign .order-header__copy h1 { max-width: none; }
    .techsite-redesign .order-header > .legacy-order-status { align-self: flex-start; }
    .techsite-redesign .form-panel.order-panel > .order-actions { margin-bottom: 38px; }
    .techsite-redesign .legal-page { width: calc(100% - 32px); padding-top: 60px; }
    .techsite-redesign .legal-page h2 { font-size: 23px; }
    .techsite-redesign .legal-page p { font-size: 16px; }
    .techsite-redesign .ts-footer > .legacy-footer-inner,
    .techsite-redesign .ts-footer .legacy-footer-inner {
        padding-top: 48px;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 32px;
    }
    .techsite-redesign .ts-footer .ts-footer-meta,
    .techsite-redesign .ts-footer .legacy-footer-inner > .ts-footer-meta {
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 24px;
    }
    .techsite-redesign .ts-footer > .ts-footer-bottom,
    .techsite-redesign .ts-footer .ts-footer-bottom {
        align-items: flex-start;
        flex-direction: column !important;
        gap: 18px;
        padding-bottom: 64px;
    }
    .techsite-redesign .ts-footer-reach {
        align-items: flex-start;
        flex-direction: column !important;
        gap: 16px;
    }
    .techsite-redesign .ts-back-top { inset-block-end: 112px; inset-inline-end: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .techsite-redesign * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .bindex-brand-row { animation: none !important; }
    .bindex-countdown strong > span.is-ticking { animation: none !important; }
}

/* Affiliate partner portal — brand red, square hairlines (matches public redesign). */
.techsite-redesign .affiliate-dashboard-shell{width:min(1180px,calc(100% - 32px));margin:42px auto 72px;display:grid;gap:22px}
.techsite-redesign .affiliate-portal-nav{display:flex;flex-wrap:wrap;gap:8px}
.techsite-redesign .affiliate-portal-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ts-line);background:#fff;color:var(--ts-ink);font-weight:700;text-decoration:none}
.techsite-redesign .affiliate-portal-nav a.is-active{background:var(--ts-red);border-color:var(--ts-red);color:#fff}
.techsite-redesign .affiliate-portal-nav a svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.techsite-redesign .affiliate-dashboard-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:32px;align-items:end;padding:38px;background:linear-gradient(135deg,var(--ts-red),var(--ts-red-deep));color:#fff}
.techsite-redesign .affiliate-dashboard-hero .ts-kicker{color:rgba(255,255,255,.75)}
.techsite-redesign .affiliate-dashboard-hero h1{margin:.35rem 0 .55rem;font-size:clamp(2rem,4vw,3.5rem);color:#fff}
.techsite-redesign .affiliate-dashboard-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.84)}
.techsite-redesign .affiliate-link-box{display:grid;gap:10px;padding:20px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.12)}
.techsite-redesign .affiliate-link-box > span{display:inline-flex;align-items:center;gap:8px;font-family:var(--ts-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.78)}
.techsite-redesign .affiliate-link-box > span svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.techsite-redesign .affiliate-link-box code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-family:var(--ts-mono);font-size:.95rem}
.techsite-redesign .affiliate-link-box button{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:1px solid #fff;padding:10px 16px;background:#fff;color:var(--ts-ink);font-weight:700;cursor:pointer}
.techsite-redesign .affiliate-link-box button:hover{background:var(--ts-ink);border-color:var(--ts-ink);color:#fff}
.techsite-redesign .affiliate-link-box button svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.techsite-redesign .affiliate-metrics{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.techsite-redesign .affiliate-metrics article,.techsite-redesign .affiliate-panel{border:1px solid var(--ts-line);background:#fff}
.techsite-redesign .affiliate-metrics article{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-content:start;padding:18px 16px}
.techsite-redesign .affiliate-metric-icon{grid-row:1 / span 3;align-self:start;display:grid;place-items:center;width:36px;height:36px;background:rgba(202,32,39,.1);color:var(--ts-red)}
.techsite-redesign .affiliate-metric-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.techsite-redesign .affiliate-metrics span,.techsite-redesign .affiliate-panel-heading span{color:var(--ts-muted);font-family:var(--ts-mono);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.techsite-redesign .affiliate-metrics strong{font-size:1.65rem;line-height:1.15;color:var(--ts-ink)}
.techsite-redesign .affiliate-metrics small{color:var(--ts-faint)}
.techsite-redesign .affiliate-dashboard-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}
.techsite-redesign .affiliate-panel{padding:22px;background:var(--ts-surface)}
.techsite-redesign .affiliate-panel-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.techsite-redesign .affiliate-panel-heading h2{margin:4px 0 0;color:var(--ts-ink)}
.techsite-redesign .affiliate-panel-hint{margin:8px 0 0;max-width:42rem;color:var(--ts-muted);font-size:.92rem;line-height:1.5}
.techsite-redesign .affiliate-panel-heading .affiliate-panel-title{display:inline-flex;align-items:center;gap:8px}
.techsite-redesign .affiliate-panel-heading .affiliate-panel-title svg{width:16px;height:16px;color:var(--ts-red);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.techsite-redesign .affiliate-payout-form{display:grid;gap:10px}
.techsite-redesign .affiliate-payout-form input{max-width:260px;padding:12px 14px;border:1px solid var(--ts-line);background:#fff;color:var(--ts-ink)}
.techsite-redesign .affiliate-payout-form input:focus{outline:2px solid var(--ts-red);outline-offset:1px}
.techsite-redesign .affiliate-payout-form .button{justify-self:start}
.techsite-redesign .affiliate-empty{margin:0;color:var(--ts-muted)}
.techsite-redesign .affiliate-payout-status{display:grid;gap:8px;padding:16px;border:1px solid var(--ts-line);border-inline-start:3px solid var(--ts-red);background:#fff}
.techsite-redesign .affiliate-payout-status strong{color:var(--ts-ink);font-size:1rem}
.techsite-redesign .affiliate-payout-status p{margin:0;color:var(--ts-muted);line-height:1.5}
.techsite-redesign .affiliate-month-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:end;min-height:180px}
.techsite-redesign .affiliate-month-bar{display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:6px;min-height:160px}
.techsite-redesign .affiliate-month-value{font-size:.68rem;color:var(--ts-muted)}
.techsite-redesign .affiliate-month-fill{align-self:end;width:100%;max-width:28px;min-height:4px;height:var(--bar-height,0%);background:linear-gradient(180deg,var(--ts-red-soft),var(--ts-red-deep))}
.techsite-redesign .affiliate-month-label{font-size:.72rem;font-weight:700;color:var(--ts-ink)}
.techsite-redesign .affiliate-month-bar small{color:var(--ts-faint);font-size:.68rem}
.techsite-redesign .affiliate-table-wrap{overflow:auto}
.techsite-redesign .affiliate-table-wrap table{width:100%;border-collapse:collapse}
.techsite-redesign .affiliate-table-wrap th,.techsite-redesign .affiliate-table-wrap td{padding:12px 10px;border-bottom:1px solid var(--ts-line);text-align:start;white-space:nowrap}
.techsite-redesign .affiliate-table-wrap th{color:var(--ts-muted);font-family:var(--ts-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.techsite-redesign .affiliate-table-wrap .is-positive{color:var(--ts-red);font-weight:700}
.techsite-redesign .affiliate-table-wrap .is-negative{color:var(--ts-red-deep);font-weight:700}
@media(max-width:1200px){.techsite-redesign .affiliate-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.techsite-redesign .affiliate-month-chart{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:800px){.techsite-redesign .affiliate-dashboard-hero,.techsite-redesign .affiliate-dashboard-grid{grid-template-columns:1fr}.techsite-redesign .affiliate-metrics{grid-template-columns:1fr 1fr}.techsite-redesign .affiliate-month-chart{grid-template-columns:repeat(4,minmax(0,1fr))}.techsite-redesign .affiliate-dashboard-hero{padding:26px}.techsite-redesign .affiliate-dashboard-shell{width:min(100% - 20px,1180px);margin-top:20px}}
@media(max-width:480px){.techsite-redesign .affiliate-metrics{grid-template-columns:1fr}}