/* ==========================================================================
   SoftPro — homepage

   Loaded after style.css by index.html only. Everything is scoped to
   html.home, so the quote wizard and the admin never see it.

   The brief was "a global software company, not an AI template". In practice
   that meant taking things away rather than adding them:

     - no gradients on text, buttons or borders — one flat brand colour
     - no glow, no film grain, no blurred colour blobs, no cursor spotlight
     - no preloader, no typewriter, no counting numbers, no scroll reveals
     - cards lift by their border, not by jumping 6px with a big shadow
     - one accent colour, used for action and nothing else

   What is left is type, spacing and the product, which is what the pages
   this is being compared with actually run on.
   ========================================================================== */

html.home {
    /* The logo's turquoise (the middle of its mint-to-cyan run, 189deg),
       darkened until it can carry white text: 5.59:1 either way round.
       The logo itself is far too light for that - white on it is 1.8:1. */
    --h-brand:       #0B7285;
    --h-brand-hover: #095E6E;
    --h-brand-soft:  #E5F2F5;   /* tint behind icons and the active tier */

    --h-page:        #FFFFFF;
    --h-alt:         #F6F8FA;   /* alternate section ground */
    --h-line:        #E2E8ED;
    --h-line-2:      #CBD5DD;

    --h-ink:         #0B1B26;   /* headings  16.9:1 on white */
    --h-body:        #3D4E5A;   /* reading    9.3:1 */
    --h-muted:       #5A6B78;   /* captions   5.6:1 */

    --h-radius:      12px;
    --h-radius-sm:   8px;

    --h-sec:         clamp(64px, 8vw, 104px);
}

/* The old stylesheet paints every selected or active state (a chosen
   option, the current step, a picked package, a quantity button) with
   --grad-accent and writes --brand-ink on top of it. Pointing those two at
   the flat brand colour and white turns all thirty of them over at once;
   white on #0B7285 is 5.59:1. The one --brand-ink that sits on the raw mint
   (the skip link) is set back explicitly below. */
html.home {
    --grad-accent: var(--h-brand);
    --brand-ink:   #FFFFFF;
}
html.home .skip-link { background: var(--h-brand); color: #FFFFFF; }

/* ---- ground ------------------------------------------------------------ */
html.home body {
    background: var(--h-page);
    color: var(--h-body);
}
html.home body::after { display: none; }                  /* film grain */
html.home ::selection { background: #CBE6EC; color: var(--h-ink); }
html.home :focus-visible { outline-color: var(--h-brand); }

/* ---- header ------------------------------------------------------------ */
html.home #header,
html.home #header.scrolled {
    height: 68px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: none;
    border-bottom: 1px solid var(--h-line);
}
html.home .nav-desktop a { color: var(--h-body); }
html.home .nav-desktop a:hover,
html.home .nav-desktop a.active { color: var(--h-ink); }

/* ---- buttons: flat, square-ish, no sheen ------------------------------- */
html.home .btn {
    border-radius: var(--h-radius-sm);
    padding: 12px 22px;
    min-height: 46px;
    font-weight: var(--fw-medium);
    font-size: 15px;
    letter-spacing: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html.home .btn:active { transform: none; }
html.home .btn-primary {
    background: var(--h-brand);
    color: #FFFFFF;
    box-shadow: none;
}
html.home .btn-primary::after { display: none; }             /* sheen */
html.home .btn-primary:hover {
    background: var(--h-brand-hover);
    transform: none;
    box-shadow: none;
}
html.home .btn-ghost {
    background: #FFFFFF;
    color: var(--h-ink);
    border: 1px solid var(--h-line-2);
    backdrop-filter: none;
}
html.home .btn-ghost:hover {
    background: var(--h-alt);
    border-color: var(--h-line-2);
    color: var(--h-ink);
    transform: none;
}
html.home .btn .ico-arrow,
html.home .btn:hover .ico-arrow { transform: none; }
html.home body.ar .btn .ico-arrow,
html.home body.ar .btn:hover .ico-arrow { transform: scaleX(-1); }

/* ---- the old card primitive, where it survives (contact, reviews) ------ */
html.home .card {
    background: #FFFFFF;
    border: 1px solid var(--h-line);
    border-radius: var(--h-radius);
    box-shadow: none;
    backdrop-filter: none;
}
html.home .card::before,
html.home .card::after { display: none; }       /* gradient rim, spotlight */
html.home .card:hover {
    transform: none;
    background: #FFFFFF;
    box-shadow: none;
    border-color: var(--h-line-2);
}

/* ---- type -------------------------------------------------------------- */
html.home .h-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--h-brand);
    margin: 0 0 14px;
}
html.home .h-title {
    font-size: clamp(34px, 5vw, 54px);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--h-ink);
    margin: 0 0 20px;
    max-width: 18ch;
}
html.home .h-h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--h-ink);
    margin: 0 0 12px;
}
html.home .h-lead {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
    color: var(--h-body);
    max-width: 60ch;
    margin: 0;
}
html.home body.ar .h-title,
html.home body.ar .h-h2 { letter-spacing: 0; line-height: 1.35; }

html.home .h-sec      { padding-block: var(--h-sec); }
html.home .h-sec-alt  { background: var(--h-alt); border-block: 1px solid var(--h-line); }
html.home .h-head     { margin-bottom: 40px; max-width: 720px; }

/* ---- hero -------------------------------------------------------------- */
html.home .h-hero {
    padding-top: calc(68px + clamp(56px, 8vw, 104px));
    padding-bottom: clamp(56px, 7vw, 88px);
    border-bottom: 1px solid var(--h-line);
}
html.home .h-hero-grid {
    display: grid;
    gap: 48px;
    align-items: center;
}
/* The product shot sits UNDER the text at full container width rather than
   beside it: the program is a wide desktop window (about 2:1), and squeezed
   into half a column its screens become unreadable. */
html.home .h-hero:has(.h-shot) { padding-bottom: 0; border-bottom: 0; }
html.home .h-hero-grid:has(.h-shot) { gap: clamp(40px, 5vw, 64px); }
html.home .h-hero .h-lead { margin-bottom: 32px; }
html.home .h-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
html.home .h-hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 28px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--h-muted);
}
html.home .h-hero-notes li { display: flex; align-items: center; gap: 8px; }
html.home .h-hero-notes .ico { width: 16px; height: 16px; color: var(--h-brand); flex-shrink: 0; }
html.home .h-shot { margin: 0; }
html.home .h-shot > img,
html.home .h-shot > picture img {
    width: 100%;
    height: auto;
    border: 1px solid var(--h-line-2);
    border-radius: var(--h-radius);
    /* one soft drop, so the window reads as sitting on the page rather than
       printed onto it; no glow, no tilt */
    box-shadow: 0 1px 2px rgba(11, 27, 38, .06), 0 24px 48px -24px rgba(11, 27, 38, .28);
}

/* ---- product cards ----------------------------------------------------- */
html.home .h-products {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
html.home .h-product {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--h-line);
    border-radius: var(--h-radius);
    padding: 32px;
}
html.home .h-product.is-main { border-color: var(--h-line-2); }
html.home .h-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--h-brand-soft);
    color: var(--h-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
html.home .h-icon .ico { width: 22px; height: 22px; }
html.home .h-kicker {
    font-size: 13px;
    color: var(--h-muted);
    margin: 0 0 6px;
}
html.home .h-product h3 {
    font-size: 22px;
    font-weight: var(--fw-bold);
    letter-spacing: -.01em;
    color: var(--h-ink);
    margin: 0 0 10px;
}
html.home .h-product p.h-desc { margin: 0 0 24px; line-height: 1.7; }
html.home .h-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: var(--fw-medium);
    color: var(--h-brand);
    align-self: flex-start;
}
html.home .h-link:hover { color: var(--h-brand-hover); text-decoration: underline; text-underline-offset: 3px; }
html.home .h-link .ico { width: 16px; height: 16px; }
html.home body.ar .h-link .ico { transform: scaleX(-1); }

/* ---- packages ---------------------------------------------------------- */
html.home .h-tiers {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
html.home .h-tier {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--h-line);
    border-radius: var(--h-radius);
    padding: 28px;
}
html.home .h-tier.is-mid { border: 2px solid var(--h-brand); padding: 27px; }
html.home .h-tier h3 {
    font-size: 19px;
    font-weight: var(--fw-bold);
    color: var(--h-ink);
    margin: 0 0 4px;
}
html.home .h-tier .h-for { font-size: 14px; color: var(--h-muted); margin: 0 0 20px; }
html.home .h-tier .h-plus {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--h-ink);
    margin: 0 0 10px;
}
html.home .h-mods { margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
html.home .h-mods li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
html.home .h-mods .ico { width: 18px; height: 18px; color: var(--h-brand); flex-shrink: 0; margin-top: 1px; }
html.home .h-tier .btn { margin-top: auto; width: 100%; }
html.home .h-tier-note {
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--h-muted);
}
/* Shown only when the catalogue could not be reached, so the section still
   says something true and still leads somewhere. */
html.home .h-tiers-fallback {
    background: #FFFFFF;
    border: 1px solid var(--h-line);
    border-radius: var(--h-radius);
    padding: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
html.home .h-tiers-fallback p { margin: 0; max-width: 56ch; }

/* ---- "everything it needs" -------------------------------------------- */
html.home .h-three {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
html.home .h-item h3 {
    font-size: 18px;
    font-weight: var(--fw-bold);
    color: var(--h-ink);
    margin: 0 0 8px;
}
html.home .h-item p { margin: 0; line-height: 1.7; }

/* ---- also on request: one quiet row ----------------------------------- */
html.home .h-also {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 24px 28px;
    border: 1px solid var(--h-line);
    border-radius: var(--h-radius);
    background: #FFFFFF;
}
html.home .h-also p { margin: 0; color: var(--h-body); }
html.home .h-also b { color: var(--h-ink); font-weight: var(--fw-medium); }

/* ---- about ------------------------------------------------------------- */
html.home .h-about {
    display: grid;
    gap: 40px 64px;
}
@media (min-width: 960px) {
    html.home .h-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
html.home .h-values { display: grid; gap: 28px; margin: 0; padding: 0; }
html.home .h-values li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
html.home .h-values .h-icon { margin: 0; }
html.home .h-values h3 { font-size: 17px; font-weight: var(--fw-bold); color: var(--h-ink); margin: 0 0 4px; }
html.home .h-values p { margin: 0; line-height: 1.65; }

/* ---- reviews (kept as they were, just quieted) ------------------------ */
html.home #testimonials .eyebrow,
html.home #contact .eyebrow {
    background: none;
    border: 0;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--h-brand);
    margin-bottom: 14px;
}
html.home #testimonials .h2,
html.home #contact .h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: var(--fw-bold);
    letter-spacing: -.02em;
}
html.home .grad-text {
    background: none;
    color: inherit;
    -webkit-background-clip: initial;
    background-clip: initial;
}
html.home .stars { color: #B7791F; }
html.home .quote-mark { opacity: .12; }

/* ---- contact ----------------------------------------------------------- */
html.home #contact { background: var(--h-alt); border-top: 1px solid var(--h-line); }
html.home #contact::before,
html.home #contact::after { display: none; }
html.home .contact-item:hover { transform: none; }

/* ---- closing band ------------------------------------------------------ */
html.home .h-close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
html.home .h-close .h-h2 { margin: 0 0 6px; }
html.home .h-close p { margin: 0; }
html.home .h-close-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- footer ------------------------------------------------------------ */
html.home footer { background: var(--h-alt); border-top: 1px solid var(--h-line); }
html.home .footer-col a:hover { padding-inline-start: 0; color: var(--h-brand); }

/* ---- leftovers from the old palette ----------------------------------- */
/* Language switch: the active side was the mint gradient, the loudest thing
   in the header. Now it is just the selected state. */
html.home .lang-switch { background: #FFFFFF; border-color: var(--h-line-2); }
html.home .lang-btn { color: var(--h-muted); }
html.home .lang-btn.active { background: var(--h-ink); color: #FFFFFF; }

/* Section heads line up on the left like every other section on the page. */
html.home .section-head { text-align: start; margin-inline: 0; max-width: 720px; margin-bottom: 40px; }
html.home .section-head .lead { margin-inline: 0; }

/* Avatars and contact icons were gradient chips. */
html.home .avatar { background: var(--h-brand-soft); color: var(--h-brand); }
html.home .ci-icon { background: var(--h-brand-soft); border-color: transparent; color: var(--h-brand); }
html.home .contact-item:hover .ci-icon { background: var(--h-brand); color: #FFFFFF; }

/* The WhatsApp button sits over the last footer line on narrow screens. */
html.home .footer-bottom { padding-bottom: 72px; }

/* ---- quote wizard (html.quote) ---------------------------------------- */
html.quote body { background: var(--h-alt); }
html.quote .section-head { margin-bottom: 32px; }
html.quote .h-title { margin-bottom: 12px; }
html.quote .opt-group-h {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--h-muted);
    margin: 24px 0 10px;
}
html.quote .panel-head + .opt-group-h { margin-top: 8px; }

/* The old colour blobs and grid behind the quote wizard. Faint on the light
   ground, but still the one decorative effect left on the site. */
html.home .atmos { display: none; }

/* ---- order page (html.order) ------------------------------------------- */
html.order body { background: var(--h-alt); }
html.order .o-page { padding: calc(68px + 40px) 0 72px; }
html.order .o-crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--h-muted); margin-bottom: 18px; }
html.order .o-crumbs a { color: var(--h-brand); }
html.order .o-title { margin-bottom: 10px; max-width: none; }
html.order #o-intro .h-lead { margin-bottom: 32px; }
html.order .o-note { color: var(--h-muted); }
html.order .o-note-warn {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 14px 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius); background: #FFFFFF;
}
html.order .o-note-warn a { color: var(--h-brand); font-weight: var(--fw-medium); }

html.order .o-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) {
    html.order .o-grid { grid-template-columns: minmax(0, 1fr) 340px; }
    html.order .o-sum  { position: sticky; top: 92px; }
}
html.order .o-main { display: grid; gap: 16px; }
html.order .o-sec {
    background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 24px;
}
html.order .o-sec h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: var(--fw-bold); color: var(--h-ink); margin: 0 0 16px;
}
html.order .o-n {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--h-brand-soft); color: var(--h-brand); font-size: 13px; font-weight: var(--fw-bold);
}
html.order .o-opt { font-size: 13px; font-weight: var(--fw-normal); color: var(--h-muted); }
html.order .o-hint { font-size: 14px; color: var(--h-muted); margin: -6px 0 14px; }

/* package switch */
html.order .o-seg {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    border: 1px solid var(--h-line-2); border-radius: var(--h-radius-sm); overflow: hidden; margin-bottom: 14px;
}
html.order .o-seg-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 8px; min-height: 58px; background: #FFFFFF; color: var(--h-body);
    border-inline-start: 1px solid var(--h-line-2); cursor: pointer; text-align: center;
}
html.order .o-seg-btn:first-child { border-inline-start: 0; }
html.order .o-seg-btn:hover { background: var(--h-alt); }
html.order .o-seg-btn.is-on { background: var(--h-ink); color: #FFFFFF; }
html.order .o-seg-name { font-size: 14px; font-weight: var(--fw-medium); line-height: 1.3; }
html.order .o-seg-price { font-size: 13px; opacity: .85; }
html.order .o-for { margin: 0 0 12px; color: var(--h-body); }
html.order .o-inc summary { cursor: pointer; color: var(--h-brand); font-weight: var(--fw-medium); font-size: 15px; }
html.order .o-inc[open] summary { margin-bottom: 14px; }
html.order .o-mods { margin-bottom: 10px; }
html.order .o-inc-h { font-size: 13px; font-weight: var(--fw-medium); color: var(--h-muted); margin: 16px 0 10px; }

/* extras */
html.order .o-checks { display: grid; gap: 2px; margin-bottom: 8px; }
html.order .o-check {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer;
    border-bottom: 1px solid var(--h-line); line-height: 1.45;
}
html.order .o-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--h-brand); flex-shrink: 0; }
html.order .o-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--h-line);
}
html.order .o-row-text { display: flex; flex-direction: column; gap: 3px; }
html.order .o-row-title { color: var(--h-ink); }
html.order .o-row-hint { font-size: 13px; color: var(--h-muted); line-height: 1.5; max-width: 52ch; }
html.order .o-stepper { flex-shrink: 0; display: inline-flex; align-items: center; border: 1px solid var(--h-line-2); border-radius: var(--h-radius-sm); }
html.order .o-stepper button {
    width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--h-ink);
}
html.order .o-stepper button:disabled { color: var(--h-line-2); cursor: default; }
html.order .o-stepper button .ico { width: 16px; height: 16px; }
html.order .o-stepper output { min-width: 32px; text-align: center; font-weight: var(--fw-bold); color: var(--h-ink); }

/* details */
html.order .o-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
html.order .o-fields .o-wide { grid-column: 1 / -1; }
html.order .field label { color: var(--h-ink); font-weight: var(--fw-medium); }
html.order .field input,
html.order .field textarea { background: #FFFFFF; border-color: var(--h-line-2); }
html.order .field input:focus,
html.order .field textarea:focus { border-color: var(--h-brand); box-shadow: 0 0 0 3px var(--h-brand-soft); }

/* summary */
html.order .o-sum {
    background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 24px;
}
html.order .o-sum-h { font-size: 13px; color: var(--h-muted); margin: 0 0 4px; }
html.order .o-sum-name { font-size: 17px; font-weight: var(--fw-bold); color: var(--h-ink); margin: 0 0 6px; }
html.order .o-sum-price { margin: 0 0 16px; }
html.order #o-sum-price { font-size: 34px; font-weight: var(--fw-bold); color: var(--h-ink); letter-spacing: -.02em; }
html.order #o-sum-once { font-size: 14px; color: var(--h-muted); }
html.order .o-sum-rows { margin: 0 0 18px; border-top: 1px solid var(--h-line); }
html.order .o-sum-rows > div {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--h-line); font-size: 14px;
}
html.order .o-sum-rows dt { color: var(--h-body); }
html.order .o-sum-rows dd { margin: 0; color: var(--h-ink); text-align: end; }
html.order .o-send { width: 100%; }
html.order .o-send:disabled { opacity: .7; cursor: default; }
html.order .o-err {
    margin: 0 0 12px; padding: 10px 12px; border-radius: var(--h-radius-sm);
    background: #FDECEF; color: #9F1F3A; font-size: 14px;
}
html.order .o-sum-note { font-size: 14px; color: var(--h-body); margin: 16px 0 10px; }
html.order .o-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.order .o-next li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--h-body); line-height: 1.45; }
html.order .o-next .ico { width: 18px; height: 18px; color: var(--h-brand); flex-shrink: 0; margin-top: 1px; }

/* sent */
html.order .o-done {
    background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius);
    padding: clamp(28px, 5vw, 56px); max-width: 720px; outline: none;
}
html.order .o-done-ico {
    width: 52px; height: 52px; border-radius: 50%; background: var(--h-brand-soft); color: var(--h-brand);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
html.order .o-done-ico .ico { width: 26px; height: 26px; }
html.order .o-done .h-lead { margin-bottom: 24px; }
html.order .o-done-btns { display: flex; flex-wrap: wrap; gap: 12px; }

html.order .o-foot { border-top: 1px solid var(--h-line); background: #FFFFFF; }
html.order .o-foot-inner {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    padding-block: 20px; font-size: 14px; color: var(--h-muted);
}
html.order .o-foot nav { display: flex; gap: 18px; }
html.order .o-foot a { color: var(--h-body); }

@media (max-width: 640px) {
    html.order .o-sec, html.order .o-sum { padding: 18px; }
    html.order .o-seg-name { font-size: 13px; }
}

/* hardware kits */
html.order .o-kits {
    display: grid; gap: 12px; margin-bottom: 8px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
html.order .o-kit {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 16px;
}
html.order .o-kit.is-on { border: 2px solid var(--h-brand); padding: 15px; background: #FBFDFD; }
html.order .o-kit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
html.order .o-kit-name { margin: 0; font-weight: var(--fw-bold); color: var(--h-ink); font-size: 15px; }
html.order .o-kit-tag {
    display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: var(--fw-medium);
    color: var(--h-muted); border: 1px solid var(--h-line-2); border-radius: 6px; padding: 1px 6px; vertical-align: 2px;
}
html.order .o-kit-price { margin: 0; font-weight: var(--fw-bold); color: var(--h-ink); white-space: nowrap; font-size: 15px; }
html.order .o-kit-desc { margin: 0; font-size: 13px; color: var(--h-muted); line-height: 1.5; }
html.order .o-kit-items {
    margin: 0; padding: 8px 0 0; list-style: none; font-size: 13px; color: var(--h-body);
    border-top: 1px solid var(--h-line);
}
html.order .o-kit-items li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; line-height: 1.45; }
html.order .o-kit-item-price { white-space: nowrap; color: var(--h-ink); font-variant-numeric: tabular-nums; }
html.order .o-kit-item-price.is-open { color: var(--h-muted); }
html.order .o-kit-btn { margin-top: auto; width: 100%; min-height: 40px; padding: 8px 14px; font-size: 14px; }
html.order .o-check-last { border-bottom: 0; padding-bottom: 0; }

/* single devices */
/* the customer's hardware list */
html.order .o-basket {
    margin: 16px 0 4px; padding: 16px; border: 1.5px solid var(--h-brand);
    border-radius: var(--h-radius); background: #FBFDFD;
}
html.order .o-basket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
html.order .o-basket-h { margin: 0; font-size: 16px; font-weight: var(--fw-bold); color: var(--h-ink); }
html.order .o-basket-total { margin: 0; font-size: 16px; font-weight: var(--fw-bold); color: var(--h-ink); white-space: nowrap; }
html.order .o-basket-hint { margin: 2px 0 10px; font-size: 13px; color: var(--h-muted); }
html.order .o-bline {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 32px; align-items: center; gap: 12px;
    padding: 8px 0; border-top: 1px solid var(--h-line);
}
html.order .o-bline-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.order .o-bline-name { color: var(--h-ink); font-size: 14px; line-height: 1.4; }
html.order .o-bline-each { color: var(--h-muted); font-size: 12px; }
/* a line that can be swapped for another of its kind (monitor sizes, PCs) */
html.order .o-bline-swap {
    max-width: 100%; min-height: 34px; padding: 5px 30px 5px 10px;
    border: 1px solid var(--h-line-2); border-radius: 8px; background-color: #FFFFFF;
    font: inherit; font-size: 14px; color: var(--h-ink); cursor: pointer;
}
html.order body.ar .o-bline-swap { padding: 5px 10px 5px 30px; }
html.order .o-bline-swap:hover,
html.order .o-bline-swap:focus { border-color: var(--h-brand); outline: none; }
html.order .o-bline-price { min-width: 64px; text-align: end; white-space: nowrap; font-weight: var(--fw-medium); color: var(--h-ink); font-variant-numeric: tabular-nums; }
html.order .o-bline-price.is-open { color: var(--h-muted); font-weight: var(--fw-normal); font-size: 13px; }
html.order .o-bline-del {
    width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1;
    color: var(--h-muted); display: inline-flex; align-items: center; justify-content: center;
}
html.order .o-bline-del:hover { background: #FDECEF; color: #9F1F3A; }
@media (max-width: 560px) {
    html.order .o-bline { grid-template-columns: 48px minmax(0, 1fr) auto 32px; }
    html.order .o-bline .o-thumb { width: 48px; height: 48px; }
    html.order .o-srow { grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 10px; }
    html.order .o-srow .o-thumb { width: 60px; height: 60px; }
    html.order .o-bline .o-sstep { grid-row: 2; grid-column: 2; justify-self: start; }
    html.order .o-bline-price { grid-row: 1; grid-column: 3; }
    html.order .o-bline-del { grid-row: 1; grid-column: 4; }
}

html.order .o-sub-h { margin: 0 0 10px; font-size: 13px; font-weight: var(--fw-medium); color: var(--h-muted); }

/* The single-items toggle: a card the customer can see is clickable, that
   says what is inside and how many are already in the order. */
html.order .o-single { margin: 14px 0 10px; }
html.order .o-st {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 14px 16px; border: 1.5px dashed var(--h-line-2); border-radius: var(--h-radius);
    background: #FFFFFF; transition: border-color .15s ease, background .15s ease;
}
html.order .o-st::-webkit-details-marker { display: none; }
html.order .o-st:hover { border-color: var(--h-brand); background: var(--h-alt); }
html.order .o-single[open] .o-st { border-style: solid; border-color: var(--h-brand); margin-bottom: 12px; }
html.order .o-st-ico {
    width: 44px; height: 44px; border-radius: 10px; background: var(--h-brand-soft); color: var(--h-brand);
    display: inline-flex; align-items: center; justify-content: center;
}
html.order .o-st-ico .ico { width: 22px; height: 22px; }
html.order .o-st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.order .o-st-title { font-size: 16px; font-weight: var(--fw-bold); color: var(--h-ink); }
html.order .o-st-hint { font-size: 13px; color: var(--h-muted); line-height: 1.45; }
html.order .o-st-badge {
    white-space: nowrap; font-size: 12px; font-weight: var(--fw-bold);
    padding: 4px 10px; border-radius: 999px; background: var(--h-brand); color: #FFFFFF;
}
html.order .o-st-chev { width: 20px; height: 20px; color: var(--h-muted); transition: transform .2s ease; }
html.order .o-single[open] .o-st-chev { transform: rotate(180deg); }
@media (max-width: 480px) {
    html.order .o-st { grid-template-columns: 40px minmax(0, 1fr) auto; }
    html.order .o-st-chev  { grid-row: 1; grid-column: 3; }
    html.order .o-st-badge { grid-row: 2; grid-column: 2; justify-self: start; }
}
html.order .o-single-cat { margin: 14px 0 4px; font-size: 12px; font-weight: var(--fw-medium); color: var(--h-muted); text-transform: uppercase; letter-spacing: .04em; }
html.order body.ar .o-single-cat { text-transform: none; letter-spacing: 0; }
/* device pictures: the uploaded photo, or the category icon standing in */
html.order .o-thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 1px solid var(--h-line);
}
html.order .o-thumb img { width: 100%; height: 100%; object-fit: contain; }
html.order .o-thumb-icon { background: var(--h-brand-soft); border-color: transparent; color: var(--h-brand); }
html.order .o-thumb-icon .ico { width: 22px; height: 22px; }
/* Photos have to be big enough to recognise the device. The list shows them
   at 72px, the customer's own list at 56px, and any photo opens full size. */
html.order .o-srow .o-thumb { width: 72px; height: 72px; border-radius: 10px; }
html.order .o-bline .o-thumb { width: 56px; height: 56px; }
html.order .o-thumb img { padding: 2px; }
html.order .o-thumb.is-zoom { cursor: zoom-in; transition: border-color .15s ease, box-shadow .15s ease; }
html.order .o-thumb.is-zoom:hover { border-color: var(--h-brand); box-shadow: 0 0 0 3px var(--h-brand-soft); }
html.order .o-kit-items .o-thumb { width: 48px; height: 48px; border-radius: 8px; }
html.order .o-kit-items li { padding: 4px 0; }

/* full-size photo */
html.order .o-lightbox {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(11, 27, 38, .62);
}
html.order .o-lightbox[hidden] { display: none; }
html.order .o-lb-box {
    position: relative; background: #FFFFFF; border-radius: 16px; padding: 20px;
    width: min(560px, 100%); max-height: 92vh; overflow: auto; text-align: center;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}
html.order .o-lb-box img { width: 100%; height: auto; max-height: 64vh; object-fit: contain; }
html.order .o-lb-name { margin: 12px 0 2px; font-size: 17px; font-weight: var(--fw-bold); color: var(--h-ink); }
html.order .o-lb-price { margin: 0; font-size: 15px; color: var(--h-body); }
html.order .o-lb-close {
    position: absolute; top: 10px; inset-inline-end: 10px; width: 40px; height: 40px; border-radius: 50%;
    font-size: 24px; line-height: 1; color: var(--h-body); background: var(--h-alt);
}
html.order .o-lb-close:hover { background: var(--h-line); color: var(--h-ink); }
html.order .o-kit-items .o-thumb-icon .ico { width: 16px; height: 16px; }
html.order .o-kit-items li { align-items: center; }
html.order .o-kit-items .o-kit-item { flex: 1; min-width: 0; }

html.order .o-srow {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 6px 8px; border-radius: 8px; font-size: 14px;
}
html.order .o-srow.is-on { background: var(--h-brand-soft); }
html.order .o-srow-name { color: var(--h-ink); line-height: 1.4; }
html.order .o-srow-price { white-space: nowrap; color: var(--h-ink); font-variant-numeric: tabular-nums; }
html.order .o-srow-price.is-open { color: var(--h-muted); font-size: 13px; }
html.order .o-sfilter { display: grid; gap: 10px; margin: 4px 0 6px; }
html.order #o-single-q {
    width: 100%; min-height: 42px; padding: 9px 14px;
    border: 1px solid var(--h-line-2); border-radius: var(--h-radius-sm); background: #FFFFFF;
    font: inherit; font-size: 15px; color: var(--h-ink);
}
html.order #o-single-q:focus { outline: none; border-color: var(--h-brand); box-shadow: 0 0 0 3px var(--h-brand-soft); }
/* Type buttons wrap onto a second line on a wide screen; on a phone they
   become one row that slides sideways, without a visible scrollbar. */
html.order .o-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) {
    html.order .o-chips {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; margin-inline: -4px; padding-inline: 4px;
    }
    html.order .o-chips::-webkit-scrollbar { display: none; }
}
html.order .o-chip {
    flex-shrink: 0; white-space: nowrap; min-height: 34px; padding: 6px 12px;
    border: 1px solid var(--h-line-2); border-radius: 999px; background: #FFFFFF;
    font-size: 13px; color: var(--h-body);
}
html.order .o-chip:hover { border-color: var(--h-brand); color: var(--h-ink); }
html.order .o-chip.is-on { background: var(--h-ink); border-color: var(--h-ink); color: #FFFFFF; }
html.order .o-single-list { max-height: 460px; overflow-y: auto; margin-inline: -8px; padding-inline: 8px; }
html.order .o-single-empty { font-size: 14px; color: var(--h-muted); margin: 10px 0; }
html.order .o-srow { min-height: 48px; transition: background .15s ease; }
html.order .o-srow:hover { background: var(--h-alt); }
html.order .o-srow.is-on:hover { background: var(--h-brand-soft); }
html.order .o-add {
    width: 36px; height: 36px; border-radius: 50%; justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--h-brand); color: var(--h-brand); background: #FFFFFF;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
html.order .o-add .ico { width: 18px; height: 18px; }
html.order .o-add:hover { background: var(--h-brand); color: #FFFFFF; }
html.order .o-add:active { transform: scale(.94); }
html.order .o-add:focus-visible { outline: 2px solid var(--h-brand); outline-offset: 2px; }
html.order .o-sstep { border-color: var(--h-brand) !important; }
html.order .o-sstep { display: inline-flex; align-items: center; border: 1px solid var(--h-line-2); border-radius: 8px; background: #FFFFFF; }
html.order .o-sbtn { width: 36px; height: 36px; font-size: 18px; line-height: 1; color: var(--h-ink); }
html.order .o-sbtn:disabled { color: var(--h-line-2); cursor: default; }
html.order .o-sstep output { min-width: 24px; text-align: center; font-weight: var(--fw-bold); color: var(--h-ink); }
html.order .o-sum-plus { margin: -10px 0 14px; font-size: 13px; color: var(--h-muted); }

/* ---- homepage tiers: the price, now that it is real ------------------ */
html.home .h-tier .h-price { margin: 0 0 18px; }
html.home .h-tier .h-price b { font-size: 32px; font-weight: var(--fw-bold); color: var(--h-ink); letter-spacing: -.02em; }
html.home .h-tier .h-price span { font-size: 14px; color: var(--h-muted); margin-inline-start: 6px; }

/* ---- floating buttons: quieter --------------------------------------- */
html.home .fab { box-shadow: 0 2px 8px rgba(11, 27, 38, .12); }
html.home .fab-wa::before { display: none; }          /* endless pulse ring */
html.home .fab-wa:hover { transform: none; }

@media (max-width: 640px) {
    html.home .h-product,
    html.home .h-tier { padding: 24px; }
    html.home .h-tier.is-mid { padding: 23px; }
    html.home .h-hero-btns .btn { flex: 1 1 auto; }
}

/* ---- the program, browsable, under the hero text -----------------------
   A copy of SoftPro's main screen drawn by app-tour.js: title bar, ribbon,
   the six menus down the side and the service cards. Colours are sampled
   from the program's screenshots; the type is the Windows UI face the
   program uses, so it reads as the program and not as part of the page. */
html.home .h-hero:has(.sp-app) {
    padding-bottom: clamp(48px, 6vw, 72px);
    border-bottom: 1px solid var(--h-line);
}
html.home .sp-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 0 16px; font-size: 14.5px; color: var(--h-muted);
}
html.home .sp-hint::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--h-brand);
    box-shadow: 0 0 0 4px var(--h-brand-soft);
}

/* Before the script draws it: the screenshot of the same screen. */
html.home .sp-app .sp-fallback {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--h-line); border-radius: 10px;
}
html.home .sp-app[data-ready] .sp-fallback { display: none; }

html.home .sp-win {
    --sp-title: #5B7398; --sp-bar: #4E6D9B; --sp-ribbon: #DCDCDC; --sp-side: #F0F0F0;
    --sp-line: #E3E6EC; --sp-ink: #1F2A37; --sp-card-ink: #22385C; --sp-hover: #CBD8EA;
    overflow: hidden;
    border: 1px solid #C5CFDA; border-radius: 10px;
    background: var(--sp-side);
    font-family: 'Segoe UI', Tahoma, 'Cairo', 'Inter', sans-serif;
    font-size: 13px; line-height: 1.3; color: var(--sp-ink);
    box-shadow: 0 1px 2px rgba(11,27,38,.05), 0 24px 48px -24px rgba(11,27,38,.30);
    text-align: start;
}
html.home .sp-win button { font: inherit; color: inherit; cursor: pointer; }
html.home .sp-win img { display: block; }

/* title bar and ribbon tabs */
html.home .sp-titlebar {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 10px; background: var(--sp-title); color: #FFFFFF;
    font-size: 11.5px; letter-spacing: .04em;
}
html.home .sp-logo { position: absolute; inset-inline-start: 8px; width: 16px; height: 16px; border-radius: 3px; background: #FFFFFF; }
html.home .sp-winbtns { position: absolute; inset-inline-end: 6px; display: flex; gap: 2px; }
html.home .sp-winbtns i { width: 34px; height: 22px; position: relative; opacity: .85; }
html.home .sp-winbtns i::before { content: ""; position: absolute; inset: 0; margin: auto; }
html.home .sp-winbtns i:nth-child(1)::before { width: 10px; height: 1px; background: #FFFFFF; }
html.home .sp-winbtns i:nth-child(2)::before { width: 9px; height: 9px; border: 1px solid #FFFFFF; }
html.home .sp-winbtns i:nth-child(3)::before { content: "×"; width: auto; height: auto; display: grid; place-items: center; font-size: 17px; line-height: 22px; text-align: center; }
html.home [dir="rtl"] .sp-winbtns, html.home body.ar .sp-winbtns { flex-direction: row-reverse; }

html.home .sp-tabs {
    display: flex; align-items: flex-end; gap: 2px;
    height: 30px; padding: 0 8px; background: var(--sp-bar);
}
html.home .sp-tab-app { display: grid; place-items: center; width: 30px; height: 26px; color: #FFFFFF; }
html.home .sp-tab-app .sp-svg { width: 16px; height: 16px; }
html.home .sp-tab {
    height: 26px; padding: 0 16px; border-radius: 4px 4px 0 0;
    color: #FFFFFF !important; font-size: 12.5px;
}
html.home .sp-tab:hover { background: rgba(255,255,255,.14); }
html.home .sp-tab.on { background: var(--sp-ribbon); color: #1E1E1E !important; }

/* ribbon */
html.home .sp-ribbon {
    display: flex; align-items: stretch; height: 104px; padding: 4px 4px 0;
    background: var(--sp-ribbon); border-bottom: 1px solid #C9C9C9;
    /* sideways only: overflow-x alone would let the wheel scroll it up too */
    overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none;
}
html.home .sp-ribbon::-webkit-scrollbar { display: none; }
html.home .sp-grp {
    display: flex; flex-direction: column; flex: none;
    padding: 0 6px; border-inline-end: 1px solid #C4C4C4;
}
html.home .sp-grp-row { display: flex; align-items: flex-start; gap: 2px; flex: 1; }
html.home .sp-grp-cap { padding: 2px 0 4px; text-align: center; font-size: 11px; color: #3F3F3F; }
html.home .sp-rb {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: auto; min-width: 54px; max-width: 92px; min-height: 0; padding: 3px 5px;
    border: 1px solid transparent; border-radius: 3px;
    font-size: 11.5px; text-align: center;
}
html.home .sp-rb:hover, html.home .sp-rb:focus-visible { background: var(--sp-hover); border-color: #A9BEDB; outline: none; }
html.home .sp-rb-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; }
/* Two lines at most, as in the program; the full name is in the button's title. */
html.home .sp-rb:not(.sp-rb-sm) .sp-rb-tx {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; line-height: 1.25;
}
html.home .sp-rb-ic img { max-width: 32px; max-height: 32px; }
html.home .sp-rb-ic .sp-svg { width: 28px; height: 28px; color: #3F64A8; }
html.home .sp-rb-stack { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
html.home .sp-rb.sp-rb-sm {
    flex-direction: row; width: auto; min-height: 0; gap: 6px; padding: 2px 6px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
html.home .sp-rb-sm .sp-rb-ic { width: 19px; height: 19px; }
html.home .sp-rb-sm .sp-rb-ic img { max-width: 19px; max-height: 19px; }
html.home .sp-rb-stack .sp-rb-sm:nth-child(2) { color: #E01E1E; }   /* the program prints these two in colour */
html.home .sp-rb-stack .sp-rb-sm:nth-child(3) { color: #3A78C2; }

/* body: menus on the start side, the page beside them */
html.home .sp-body {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    height: 470px;
}
html.home .sp-side { padding: 10px 8px 10px 10px; overflow-y: auto; }
html.home .sp-find { position: relative; display: block; margin-bottom: 14px; }
html.home .sp-find input {
    width: 100%; height: 28px; padding: 0 8px; padding-inline-end: 28px;
    background: transparent; border: 0; border-bottom: 1px solid #C9CDD3;
    font: inherit; font-size: 12.5px; color: var(--sp-ink);
}
html.home .sp-find input:focus { outline: none; border-bottom-color: #3F64A8; background: #FFFFFF; }
html.home .sp-find svg { position: absolute; inset-inline-end: 6px; top: 7px; width: 15px; height: 15px; color: #555; pointer-events: none; }
html.home .sp-menus { display: grid; gap: 2px; }
html.home .sp-menu {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 11px 10px; border-radius: 6px;
    font-size: 13.5px; font-weight: 700; text-align: start;
    transition: background .12s;
}
html.home .sp-menu img { width: 28px; height: 28px; flex: none; }
html.home .sp-menu:hover { background: #E3E8F0; }
html.home .sp-menu.on { background: #FFFFFF; box-shadow: inset 3px 0 0 #3F64A8; }
html.home body.ar .sp-menu.on { box-shadow: inset -3px 0 0 #3F64A8; }
html.home .sp-menu:focus-visible { outline: 2px solid #3F64A8; outline-offset: -2px; }

html.home .sp-page {
    position: relative; margin: 8px; margin-inline-start: 0;
    padding: 20px 26px 26px; overflow-y: auto;
    background: #FFFFFF; border: 1px solid var(--sp-line); border-radius: 10px;
}
html.home .sp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.home .sp-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px; border-radius: 999px;
    background: #F3F4F7; border: 1px solid #E3E5EC;
    font-size: 12.5px; font-weight: 700; color: var(--sp-card-ink);
}
html.home button.sp-pill:hover { background: #E8EDF5; border-color: #C9D3E3; }
html.home .sp-pill img, html.home .sp-pill-ic { width: 16px; height: 16px; }
html.home .sp-sep { color: #9AA3AF; font-size: 15px; }

html.home .sp-cards {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px;
    min-height: calc(100% - 40px); padding: 18px 0 4px;
    max-width: calc(var(--sp-cols, 5) * 144px); margin-inline: auto;   /* 132 card + 12 gap */
}
html.home .sp-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: 132px; height: 116px; padding: 10px 8px;
    background: #FFFFFF; border: 1px solid #E4E6EF; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(31,42,55,.06);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
html.home .sp-card:hover, html.home .sp-card:focus-visible {
    border-color: #A9BEDB; box-shadow: 0 6px 16px -8px rgba(31,42,55,.28); transform: translateY(-1px); outline: none;
}
html.home .sp-card-ic { display: grid; place-items: center; width: 52px; height: 52px; }
html.home .sp-card-ic img { max-width: 52px; max-height: 52px; }
html.home .sp-card-ic .sp-svg { width: 40px; height: 40px; color: #3F64A8; }
html.home .sp-card-tx { font-size: 13px; font-weight: 700; color: var(--sp-card-ink); text-align: center; line-height: 1.3; }
html.home .sp-empty { margin: 60px 0 0; text-align: center; color: #6B7280; }

/* a single screen: what it is for, over the cards */
html.home .sp-detail {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center; padding: 16px;
    background: rgba(255,255,255,.82);
}
html.home .sp-detail-card {
    position: relative; width: min(440px, 100%);
    padding: 26px 26px 24px; text-align: center;
    background: #FFFFFF; border: 1px solid #DCE2EB; border-radius: 12px;
    box-shadow: 0 24px 48px -16px rgba(15,23,42,.30);
}
html.home .sp-detail-x {
    position: absolute; top: 10px; inset-inline-end: 10px;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #6B7280;
}
html.home .sp-detail-x:hover { background: #F1F3F6; color: #111827; }
html.home .sp-detail-x .sp-svg { width: 16px; height: 16px; }
html.home .sp-detail-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; }
html.home .sp-detail-ic img { max-width: 64px; max-height: 64px; }
html.home .sp-detail-ic .sp-svg { width: 46px; height: 46px; color: #3F64A8; }
html.home .sp-detail-path { margin: 0 0 4px; font-size: 12px; color: #6B7280; }
html.home .sp-detail-t { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--sp-ink); }
html.home .sp-detail-d { margin: 0; font-size: 14.5px; line-height: 1.75; color: #374151; }

html.home .sp-status {
    display: flex; align-items: center; height: 26px; padding: 0 12px;
    background: var(--sp-ribbon); border-top: 1px solid #C9C9C9;
    font-size: 12.5px; font-weight: 700;
}
html.home .sp-status b { color: #E01E1E; margin-inline-end: 6px; }

/* Phones: no ribbon; the menus become a row to swipe, the page grows. */
@media (max-width: 720px) {
    html.home .sp-hint { font-size: 13.5px; }
    html.home .sp-tabs, html.home .sp-ribbon { display: none; }
    html.home .sp-body { grid-template-columns: minmax(0, 1fr); height: auto; }
    html.home .sp-side { padding: 8px; overflow: visible; }
    html.home .sp-find { margin-bottom: 8px; }
    html.home .sp-menus { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    html.home .sp-menus::-webkit-scrollbar { display: none; }
    html.home .sp-menu { flex: none; width: auto; padding: 7px 10px; font-size: 12.5px; flex-direction: row-reverse; }
    html.home .sp-menu img { width: 20px; height: 20px; }
    html.home .sp-menu.on, html.home body.ar .sp-menu.on { box-shadow: inset 0 -2px 0 #3F64A8; }
    html.home .sp-page { margin: 0 8px 8px; padding: 14px 12px 18px; min-height: 380px; }
    html.home .sp-cards { gap: 8px; min-height: 0; max-width: none; }
    html.home .sp-card { width: calc(33.333% - 6px); min-width: 92px; height: 100px; gap: 8px; }
    html.home .sp-card-ic, html.home .sp-card-ic img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }
    html.home .sp-card-tx { font-size: 12px; }
}

/* ---- downloads page (html.downloads, on top of the order page's frame) --- */
html.downloads .d-intro { max-width: 720px; margin-bottom: 40px; }
html.downloads .d-intro .h-title { margin-bottom: 12px; max-width: none; }
html.downloads .d-sec { margin-bottom: 48px; }
html.downloads .d-h2 { margin: 0 0 6px; font-size: 22px; font-weight: var(--fw-bold); color: var(--h-ink); }
html.downloads .d-sub { margin: 0 0 18px; max-width: 70ch; font-size: 15px; line-height: 1.7; color: var(--h-muted); }

html.downloads .d-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
html.downloads .d-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
html.downloads .d-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px; background: #FFFFFF;
    border: 1px solid var(--h-line); border-radius: var(--h-radius);
}
html.downloads .d-card h3 { margin: 0; font-size: 17px; font-weight: var(--fw-bold); color: var(--h-ink); }
html.downloads .d-card-head { display: flex; align-items: center; gap: 14px; }
html.downloads .d-app-ic { width: 52px; height: 52px; border-radius: 23%; border: 1px solid var(--h-line); background: #FFFFFF; flex: none; }   /* store icons, cut like a phone home screen */
html.downloads .d-tag { margin: 2px 0 0; font-size: 13px; color: var(--h-brand); }
html.downloads .d-desc { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--h-body); }
html.downloads .d-meta { margin: 6px 0 0; font-size: 13px; color: var(--h-muted); }

/* store badges: drawn, not the stores' artwork, so they follow the page */
html.downloads .d-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
html.downloads .d-store {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px 7px 11px; border-radius: 9px;
    background: var(--h-ink); color: #FFFFFF; line-height: 1.15;
    font-size: 15px; font-weight: var(--fw-bold);
    transition: background .15s;
}
html.downloads .d-store:hover { background: #1C3243; }
html.downloads .d-store .ico { width: 22px; height: 22px; flex: none; }
html.downloads .d-store small { display: block; font-size: 10.5px; font-weight: var(--fw-normal); opacity: .8; }
html.downloads .d-store.is-soon { background: var(--h-alt); color: var(--h-muted); border: 1px solid var(--h-line); cursor: default; }
html.downloads .d-store.is-soon small { opacity: 1; }

/* one-line cards: icon, text, button */
html.downloads .d-row, html.downloads .d-trial { flex-direction: row; align-items: center; gap: 16px; }
html.downloads .d-row-tx { flex: 1; min-width: 0; }
html.downloads .d-row-tx .d-desc { margin-top: 4px; }
html.downloads .d-tool-ic {
    display: grid; place-items: center; width: 48px; height: 48px; flex: none;
    border-radius: 12px; background: var(--h-alt); color: var(--h-body);
}
html.downloads .d-tool-ic .ico { width: 24px; height: 24px; }
html.downloads .d-tool-ic.is-brand { background: var(--h-brand-soft); color: var(--h-brand); }
html.downloads .d-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
html.downloads .d-btn .ico { width: 16px; height: 16px; }
html.downloads body.ar .d-btn .ico use[href="#i-ext"] { transform: scaleX(-1); transform-origin: center; }

@media (max-width: 560px) {
    html.downloads .d-row, html.downloads .d-trial { flex-wrap: wrap; }
    html.downloads .d-row .d-btn, html.downloads .d-trial .d-btn { width: 100%; justify-content: center; }
}