/* Hallmark · v2.0.0 | existing RocketSMS brand | page: backup SMS | signature: routing diagram | material: words | genre: modern-minimal */
/* Critique: Keep the site's Montserrat, violet header and restrained information layout; no unsupported reliability claims. */
:root {
    --backup-font: 'Montserrat', sans-serif;
    --backup-ink: #4e5765;
    --backup-heading: #4b4e80;
    --backup-brand: #555bb7;
    --backup-brand-hover: #555bb7;
    --backup-white: #fafaff;
    --backup-soft: #f5f7ff;
    --backup-line: #dfe2f5;
    --backup-muted: #667085;
    --backup-focus: #242859;
    --backup-alert: #a84c50;
    --backup-alert-soft: #fff3f3;
    --backup-success: #217c58;
    --backup-success-soft: #eaf7f0;
}

html, body { overflow-x: clip; }
.backup-sms { font-family: var(--backup-font); color: var(--backup-ink); }
.backup-sms .container { max-width: 960px; width: 100%; }
.backup-sms__hero { padding: 76px 0 84px; background: var(--backup-soft); }
.backup-sms__hero-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.backup-sms h1, .backup-sms h2, .backup-sms h3 { color: var(--backup-heading); overflow-wrap: break-word; text-wrap: balance; min-width: 0; }
.backup-sms h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.13; margin: 0 0 24px; font-weight: 800; }
.backup-sms__hero-copy > p { font-size: 18px; line-height: 1.6; margin: 0 0 32px; }
.backup-sms__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border-radius: 9px; background: var(--backup-brand); color: var(--backup-white); font-weight: 700; line-height: 1.4; text-align: center; transition: background-color .2s ease, transform .2s ease; }
.backup-sms__button:hover { background: var(--backup-brand-hover); color: var(--backup-white); }
.backup-sms__button:active { transform: scale(.98); }
.backup-sms a:focus-visible, header a:focus-visible, footer a:focus-visible { outline: 3px solid var(--backup-focus); outline-offset: 3px; }
.backup-sms__contact { display: block; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--backup-muted); }
.backup-sms__contact a { color: var(--backup-heading); text-decoration: underline; }
.backup-sms__diagram { padding: 24px; border: 1px solid var(--backup-line); border-radius: 16px; background: var(--backup-white); }
.backup-sms__diagram-title { display: block; color: var(--backup-heading); font-weight: 700; margin-bottom: 12px; }
.backup-sms__network { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--backup-font); }
.backup-sms__route-base, .backup-sms__route { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.backup-sms__route-base { stroke: var(--backup-line); stroke-dasharray: 3 6; }
.backup-sms__route { stroke-dasharray: 3 6; }
.backup-sms__route--primary { stroke: var(--backup-brand); }
.backup-sms__route--failed { stroke: var(--backup-alert); opacity: 0; }
.backup-sms__route--reserve { stroke: var(--backup-success); opacity: .45; }
.backup-sms__packet { fill: var(--backup-brand); opacity: 0; }
.backup-sms__packet--reserve { fill: var(--backup-success); }
.backup-sms__node { fill: var(--backup-soft); stroke: var(--backup-line); stroke-width: 1.5; }
.backup-sms__node--reserve { fill: var(--backup-success-soft); stroke: var(--backup-success); }
.backup-sms__node-label { fill: var(--backup-heading); font-size: 13px; font-weight: 700; }
.backup-sms__node-label--reserve { fill: var(--backup-success); }
.backup-sms__failure { opacity: 0; }
.backup-sms__failure circle { fill: var(--backup-white); stroke: var(--backup-alert); stroke-width: 2; }
.backup-sms__failure path { fill: none; stroke: var(--backup-alert); stroke-width: 2.5; stroke-linecap: round; }
.backup-sms__diagram p { padding-top: 16px; border-top: 1px solid var(--backup-line); font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
    .backup-sms__route--primary { animation: backup-route-primary 8s linear infinite; }
    .backup-sms__route--failed { animation: backup-route-failed 8s linear infinite; }
    .backup-sms__route--reserve { animation: backup-route-reserve 8s linear infinite; }
    .backup-sms__packet--primary { animation: backup-packet-primary 8s linear infinite; }
    .backup-sms__packet--reserve { animation: backup-packet-reserve 8s linear infinite; }
    .backup-sms__failure { animation: backup-failure 8s linear infinite; }
    .backup-sms__node--primary { animation: backup-node-primary 8s linear infinite; }
    .backup-sms__node--reserve { animation: backup-node-reserve 8s linear infinite; }
}
@keyframes backup-route-primary { 0%, 30% { opacity: 1; } 38%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes backup-route-failed { 0%, 32% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes backup-route-reserve { 0%, 44% { opacity: .45; } 54%, 90% { opacity: 1; } 100% { opacity: .45; } }
@keyframes backup-packet-primary { 0%, 4%, 32%, 100% { opacity: 0; } 8%, 28% { opacity: 1; } }
@keyframes backup-packet-reserve { 0%, 52%, 80%, 100% { opacity: 0; } 56%, 76% { opacity: 1; } }
@keyframes backup-failure { 0%, 32% { opacity: 0; transform: scale(.7); transform-origin: 340px 27px; } 40%, 90% { opacity: 1; transform: scale(1); transform-origin: 340px 27px; } 100% { opacity: 0; transform: scale(.7); transform-origin: 340px 27px; } }
@keyframes backup-node-primary { 0%, 32%, 100% { stroke: var(--backup-line); } 42%, 90% { stroke: var(--backup-alert); } }
@keyframes backup-node-reserve { 0%, 44%, 100% { opacity: .7; } 54%, 90% { opacity: 1; } }
.backup-sms__section { padding: 80px 0; }
.backup-sms__section h2 { font-size: clamp(25px, 3vw, 32px); line-height: 1.25; margin: 0 0 32px; }
.backup-sms__scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.backup-sms__scenarios li { display: block; padding-top: 20px; border-top: 2px solid var(--backup-line); }
.backup-sms__scenarios h3 { font-size: 19px; line-height: 1.3; margin-bottom: 12px; }
.backup-sms__scenarios p, .backup-sms__steps span { font-size: 15px; line-height: 1.65; }
.backup-sms__section--steps { background: var(--backup-soft); }
.backup-sms__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; list-style: none; counter-reset: backup-step; margin-bottom: 32px; }
.backup-sms__steps li { display: flex; flex-direction: column; position: relative; padding-left: 52px; counter-increment: backup-step; }
.backup-sms__steps li::before { content: counter(backup-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--backup-white); background: var(--backup-brand); font-size: 14px; font-weight: 700; }
.backup-sms__steps strong { color: var(--backup-heading); line-height: 1.4; margin: 4px 0 8px; }
.backup-sms__steps a { color: var(--backup-brand-hover); text-decoration: underline; }
.backup-sms__note { margin-bottom: 24px; font-size: 14px; line-height: 1.6; }
.backup-sms__quick-start { padding: 56px 0; }
.backup-sms__quick-start-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.backup-sms__quick-start h2 { margin: 0 0 12px; font-size: clamp(25px, 3vw, 32px); line-height: 1.25; }
.backup-sms__quick-start p { max-width: 550px; font-size: 16px; line-height: 1.6; }
.backup-sms__quick-start .backup-sms__button { flex: 0 0 auto; }
@media (min-width: 881px) and (max-width: 1020px) { header .nav .nav-wrapper .nav-menu { flex-basis: 790px; } header .nav .nav-wrapper .nav-menu ul { flex-basis: 630px; } }
@media (max-width: 880px) { .backup-sms__hero-inner { gap: 28px; } }
@media (max-width: 880px) { header .nav .backup-nav-link { display: inline-block !important; } header .nav .backup-nav-link a { display: inline-flex; align-items: center; min-height: 44px; } header .nav .nav-menu { flex-basis: 510px !important; } header .nav .nav-menu ul { flex-basis: 305px !important; } }
@media (max-width: 560px) { header .nav .nav-wrapper { height: auto; padding-bottom: 16px; } header .nav .nav-menu { width: 100% !important; flex-basis: auto !important; flex-direction: column; gap: 12px; } header .nav .nav-menu ul { width: 100%; flex-basis: auto !important; justify-content: center; gap: 16px; } header .nav .backup-nav-link a { color: var(--backup-white); } header .nav .nav-wrapper .nav-menu li.required { margin-top: 0; } }
@media (max-width: 700px) {
    .backup-sms__hero { padding: 48px 0 60px; }
    .backup-sms__hero-inner, .backup-sms__scenarios, .backup-sms__steps { grid-template-columns: minmax(0, 1fr); }
    .backup-sms__hero-copy > p { font-size: 16px; }
    .backup-sms__section { padding: 56px 0; }
    .backup-sms__scenarios { gap: 24px; }
    .backup-sms__steps { gap: 24px; }
    .backup-sms__quick-start { padding: 48px 0; }
    .backup-sms__quick-start-inner { flex-direction: column; align-items: stretch; gap: 24px; }
}
@media (max-width: 460px) { .backup-sms__hero .backup-sms__button, .backup-sms__section--steps .backup-sms__button, .backup-sms__quick-start .backup-sms__button { display: flex; width: 100%; } .backup-sms__diagram { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .backup-sms__button { transition: none; } .backup-sms__packet { display: none; } .backup-sms__route--primary { opacity: 0; } .backup-sms__route--failed, .backup-sms__route--reserve, .backup-sms__failure { opacity: 1; } .backup-sms__node--primary { stroke: var(--backup-alert); } }