/* ==========================================================================
   aridesk — service pages (services/*.html)
   Loaded AFTER css/home.css, which carries the tokens, header, footer, buttons,
   hero ground, bands, glass, CTA block and the reveal motion. This file only
   adds what a service page has and the homepage does not.
   Generated pages: node scripts/build-service-pages.mjs
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: the homepage hero with a crumb above the title and a one-line title
   -------------------------------------------------------------------------- */
.svc-hero .hero__content { max-width: 860px; }
.svc-crumb {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 22px; padding: 8px 14px 8px 12px; border-radius: 999px;
    background: var(--surface); color: var(--muted); font-size: 0.9375rem; font-weight: 500;
    transition: color var(--dur-fast), background-color var(--dur-fast);
}
.svc-crumb:hover { color: var(--accent-text); background: var(--accent-soft); }
.svc-crumb svg { transform: scaleX(-1); }
.svc-hero .hero__title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); }
.svc-hero .hero__visual { max-width: 820px; }

/* the product window: a list of rows instead of the homepage's two tiles */
.svc-window__title { font-style: normal; margin-inline-start: auto; font-size: 13px; color: var(--muted); direction: rtl; }
.svc-window__rows { display: grid; gap: 10px; padding: 18px; }
.svc-row {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 16px; background: var(--surface);
}
.svc-row__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; }
.svc-row__icon svg { width: 22px; height: 22px; }
.svc-row__icon--ok { background: var(--ok-soft); color: var(--ok); }
.svc-row__icon--info { background: var(--info-soft); color: var(--info); }
.svc-row__icon--muted { background: var(--accent-soft); color: var(--accent); }
.svc-row__text { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.svc-row__sub { font-size: var(--step-small); color: var(--muted); margin-top: 3px; }
.svc-row__status { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.svc-row__status--ok { background: var(--ok-soft); color: var(--ok); }
.svc-row__status--info { background: var(--info-soft); color: var(--info); }
.svc-row__status--muted { background: var(--surface-2); color: var(--muted); }

/* --------------------------------------------------------------------------
   The navy band: three (or four) numbered glass cards
   -------------------------------------------------------------------------- */
.svc-points { padding: calc(var(--window-overlap) + 64px) 0 var(--section); }
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-cards:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-card {
    position: relative;
    padding: 30px 28px 28px;
    border-radius: var(--radius-lg);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);                                 /* taste-skill-ignore: owner's design language */
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 12px rgba(255, 255, 255, 0.1); /* taste-skill-ignore: owner's design language */
    color: var(--band-ink);
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.svc-card:hover { transform: translateY(-3px); background: var(--glass-strong); }
.svc-card__mark { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--accent); margin-bottom: 18px; }
.svc-card__title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.svc-card__text { margin-top: 12px; color: var(--band-muted); font-size: 1rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Included + how it works
   -------------------------------------------------------------------------- */
.svc-detail { padding: var(--section) 0; }
.svc-detail__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
.svc-benefits { margin-top: 32px; gap: 16px 24px; }
.svc-benefits .feature-item { font-size: 1.0625rem; align-items: flex-start; }
.svc-benefits .feature-item__icon { margin-top: 1px; }
.svc-steps-card {
    background: var(--card); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px);
    box-shadow: var(--shadow-card); /* taste-skill-ignore: owner's design language */
    position: sticky; top: 104px;
}
.svc-steps-card__title { font-size: 1.5rem; font-weight: 700; }
.svc-steps { margin-top: 22px; display: grid; gap: 18px; counter-reset: step; }
.svc-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.svc-step__num { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-fill); color: #fff; font-weight: 700; font-size: 1rem; }
.svc-step__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; padding-top: 8px; }
.svc-step__text { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Other services
   -------------------------------------------------------------------------- */
.svc-more { padding: var(--section) 0; background: var(--surface); }
.svc-more__head { margin-bottom: 40px; }
.svc-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.svc-more__card {
    display: grid; gap: 10px; align-content: start;
    padding: 24px 22px 22px; border-radius: 20px; background: var(--card);
    box-shadow: var(--shadow-chip); /* taste-skill-ignore: owner's design language */
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.svc-more__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } /* taste-skill-ignore: owner's design language */
.svc-more__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.svc-more__icon svg { width: 24px; height: 24px; }
.svc-more__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.svc-more__text { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* the closing block carries a line under its title here */
.cta__text { position: relative; margin-top: 14px; font-size: var(--step-lead); font-weight: 500; color: var(--cta-ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .svc-cards, .svc-cards:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-detail__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .svc-steps-card { position: static; }
}
@media (max-width: 768px) {
    .svc-cards, .svc-cards:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .svc-card { padding: 24px 22px 22px; }
    .svc-row { grid-template-columns: 44px minmax(0, 1fr); }
    .svc-row__status { grid-column: 2; justify-self: start; }
    .svc-benefits { grid-template-columns: minmax(0, 1fr); }
    .svc-more__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .svc-hero .hero__title { font-size: 2.125rem; }
    .svc-window__rows { padding: 12px; gap: 8px; }
    .svc-row { padding: 12px 14px; }
    .svc-more__grid { grid-template-columns: minmax(0, 1fr); }
}