/* V4 static pages (systems hub, Reputation welcome), CRO round 2026-09-17.
   Built on the shared V4 shell (styles.css, header.css, footer.css); tokens from styles.css :root. */

.sh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 18px; font-size: 14px; color: var(--v4-on-ink-mid); }
.sh-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--v4-on-ink-mid); text-underline-offset: 4px; }
.sh-crumb a:hover { color: var(--v4-on-ink); }
.sh-crumb [aria-current] { color: var(--v4-on-ink); }
.ros-sec--cream .sh-crumb, .ros-sec--cream .sh-crumb a { color: var(--v4-on-light-mid); }
.ros-sec--cream .sh-crumb [aria-current] { color: var(--v4-on-light); }

.sh-kicker { margin: 0 0 14px; color: var(--v4-coral); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .sh-kicker { letter-spacing: 0; font-size: 15px; }
.ros-sec--cream .sh-kicker { color: var(--v4-coral-light); }

.sh-h1 { margin: 0; max-width: 20ch; font-size: clamp(36px, 5.2vw, 66px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
html[lang="ar"] .sh-h1 { line-height: 1.3; letter-spacing: 0; }
.sh-hero { padding-block: clamp(36px, 5vw, 80px) clamp(56px, 7vw, 104px); }
.sh-hero .ros-lede { margin-top: 20px; }

.sh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sh-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--v4-on-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.sh-textlink:hover { text-decoration-thickness: 2px; }
.ros-sec--cream .sh-textlink { color: var(--v4-on-light); }

/* the five systems as jump chips, with their status */
.sh-map { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.sh-map a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--v4-line); border-radius: 999px; background: rgba(244, 237, 225, .03); color: var(--v4-on-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s var(--v4-ease), background-color .2s var(--v4-ease); }
.sh-map a:hover, .sh-map a:focus-visible { border-color: var(--v4-on-ink-mid); background: rgba(244, 237, 225, .07); }
.sh-dot { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--v4-calm); box-shadow: 0 0 0 3px rgba(111, 156, 138, .2); }
.sh-dot--scope { background: transparent; border: 1.5px solid var(--v4-on-ink-low); box-shadow: none; }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; color: var(--v4-on-ink-mid); font-size: 14px; }
.sh-legend span { display: inline-flex; align-items: center; gap: 8px; }

.sh-head { margin-bottom: clamp(24px, 3vw, 40px); }
.sh-head .ros-lede { margin-top: 14px; }

/* available now: two product cards */
.sh-grid2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sh-grid2 { grid-template-columns: 1fr 1fr; } }
.sh-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: 18px; background: var(--v4-paper); color: var(--v4-on-light); box-shadow: var(--ros-shadow-paper); }
.sh-card--ink { background: var(--v4-ink); color: var(--v4-on-ink); box-shadow: var(--ros-shadow-card); }
.sh-badge { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: 12px; border-radius: 999px; background: #dfece5; color: #1f4535; font-size: 13px; font-weight: 800; }
html[lang="ar"] .sh-badge { font-size: 14px; }
.sh-card--ink .sh-badge { background: var(--v4-coral); color: var(--v4-on-light); }
.sh-card h3 { margin: 4px 0 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
html[lang="ar"] .sh-card h3 { line-height: 1.35; letter-spacing: 0; }
.sh-card__line { margin: 0; font-size: 18px; line-height: 1.6; color: var(--v4-on-light-mid); }
.sh-card--ink .sh-card__line { color: var(--v4-on-ink-mid); }
.sh-points { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.sh-points li { position: relative; padding-inline-start: 28px; font-size: 16px; line-height: 1.7; }
/* a check mark keeps its shape in both directions, so its borders are physical */
.sh-points li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .5em; inline-size: 13px; block-size: 7px; border-left: 2px solid #3f7a62; border-bottom: 2px solid #3f7a62; transform: rotate(-45deg); }
.sh-card--ink .sh-points li::before { border-color: var(--v4-calm); }
.sh-price { margin: auto 0 0; padding-top: 18px; border-top: 1px solid #e3d9c9; font-size: 16px; font-weight: 700; line-height: 1.6; }
.sh-card--ink .sh-price { border-top-color: var(--v4-line); }
.sh-card .sh-acts { margin-top: 4px; }
.sh-card:not(.sh-card--ink) .ros-btn--secondary { color: var(--v4-on-light); border-color: #c9bda9; }
.sh-card:not(.sh-card--ink) .ros-btn--secondary:hover { border-color: var(--v4-on-light); }
.sh-wa { display: inline-flex; align-items: center; gap: 8px; }
.sh-wa svg { inline-size: 20px; block-size: 20px; flex: none; }

/* scoped systems */
.sh-grid3 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sh-grid3 { grid-template-columns: repeat(3, 1fr); } }
.sh-scope { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--v4-line); border-radius: 16px; background: var(--v4-ink-lift); scroll-margin-top: calc(var(--ros-head) + 24px); transition: border-color .3s var(--v4-ease), box-shadow .3s var(--v4-ease); }
.sh-scope:target { border-color: var(--v4-coral); box-shadow: 0 0 0 1px var(--v4-coral); }
.sh-scope__top { display: flex; align-items: center; gap: 10px; color: var(--v4-on-ink-mid); font-size: 14px; font-weight: 700; }
.sh-scope h3 { margin: 0; font-size: clamp(22px, 2vw, 26px); line-height: 1.3; font-weight: 800; }
.sh-scope p { margin: 0; color: var(--v4-on-ink-mid); font-size: 16px; line-height: 1.7; }
.sh-scope .sh-textlink { margin-top: auto; }

/* how to start */
.sh-ladder { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .sh-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sh-ladder { grid-template-columns: repeat(4, 1fr); } }
.sh-step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: var(--v4-paper); color: var(--v4-on-light); box-shadow: var(--ros-shadow-paper); }
.sh-step__n { color: var(--v4-coral-display); font-size: 34px; font-weight: 800; line-height: 1; }
.sh-step__tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #efe6d7; color: #54452f; font-size: 13px; font-weight: 700; }
html[lang="ar"] .sh-step__tag { font-size: 14px; }
.sh-step h3 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 800; }
.sh-step p { margin: 0; color: #3d3b42; font-size: 16px; line-height: 1.75; }
.sh-step .sh-textlink { margin-top: auto; color: var(--v4-coral-light); }
.sh-note { max-width: 70ch; margin: 22px 0 0; color: var(--v4-on-light-mid); font-size: 16px; line-height: 1.7; }
.sh-note a { color: var(--v4-coral-light); text-underline-offset: 3px; }

/* final */
.sh-final .ros-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* welcome */
.wl-hero { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px); }
.wl-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .wl-grid { grid-template-columns: 1.25fr .75fr; } }
.wl-check { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin: 0 0 18px; border-radius: 50%; background: #dfece5; }
.wl-check::before { content: ""; inline-size: 20px; block-size: 10px; margin-top: -5px; border-left: 3px solid #1f6b4f; border-bottom: 3px solid #1f6b4f; transform: rotate(-45deg); }
.wl-lang { margin: 0 0 12px; font-size: 15px; }
.wl-lang a { color: var(--v4-coral-light); text-underline-offset: 3px; }
.wl-hero .sh-h1 { color: var(--v4-on-light); max-width: 22ch; font-size: clamp(32px, 4.4vw, 54px); }
.wl-hero .ros-lede { margin-top: 16px; }
.wl-plan { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 20px 0 0; padding: 8px 14px; border-radius: 999px; background: #efe6d7; color: #54452f; font-size: 15px; font-weight: 700; }
.wl-plan[hidden] { display: none; }
.wl-acts { margin-top: 24px; }
.wl-note { margin: 14px 0 0; color: var(--v4-on-light-mid); font-size: 15px; }
.wl-note a { color: var(--v4-coral-light); text-underline-offset: 3px; }
.wl-prep { padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; background: var(--v4-paper); box-shadow: var(--ros-shadow-paper); color: var(--v4-on-light); }
.wl-prep h2 { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.wl-prep .sh-points li::before { border-color: #3f7a62; }
.wl-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: wl; }
.wl-steps li { counter-increment: wl; position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding-block: 20px; border-top: 1px solid var(--v4-line); }
.wl-steps li::before { content: counter(wl); grid-row: span 2; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--v4-on-ink-low); color: var(--v4-on-ink); font-size: 15px; font-weight: 800; }
.wl-steps h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.4; }
.wl-steps p { margin: 0; color: var(--v4-on-ink-mid); font-size: 16px; line-height: 1.75; }
.wl-bill { max-width: 78ch; }
.wl-bill h2 { margin: 0 0 12px; font-size: clamp(20px, 2vw, 24px); font-weight: 800; color: var(--v4-on-light); }
.wl-bill p { margin: 0 0 10px; color: #3d3b42; font-size: 16px; line-height: 1.8; }
.wl-bill a { color: var(--v4-coral-light); text-underline-offset: 3px; }

/* phones: the large asks stay on one line and span the column */
@media (max-width: 520px) {
  .sh-page .ros-btn--lg { inline-size: 100%; justify-content: center; padding-inline: 20px; font-size: 17px; }
  .sh-card .sh-acts .ros-btn { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-map a, .sh-scope { transition: none; }
}