/* «دليل بينجلو» (public/guide.html, drawn by js/guide.js) on the 2026 redesign tokens (redesign.css → site.min.css).
 * Layout: hero + setup → sticky route rail → the stops (checklist, install stepper, arrival stepper + plan card, trip
 * cards, warnings, problem solver) → FAQ. The phone screens (.ph-*) are drawn in CSS: three frames (iOS / Samsung /
 * Huawei) in Pinglo's own palette; .hl marks where to tap. Logical properties throughout: RTL and LTR mirror. */

.gb-page { overflow-x: clip; background: var(--paper); padding-block: calc(78px + clamp(16px, 3vw, 36px)) clamp(48px, 7vw, 88px); }
.gb-page > * { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad-x); }
.gb-page .pg-i { color: var(--ink); }
.gb-page section { padding-block: clamp(30px, 4.6vw, 56px) 0; scroll-margin-top: calc(var(--notice-h, 0px) + 138px); }

.gb-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.gb-crumbs a { color: var(--muted); text-decoration: none; }
.gb-crumbs a:hover { color: var(--blue); }
.gb-kicker { font-size: 13px; font-weight: 600; color: var(--red); margin: 0; }

/* hero + setup */
.gb-hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .gb-hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } }
.gb-hero-tx { display: grid; gap: 14px; min-width: 0; }
.gb-hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.25; margin: 0; text-wrap: balance; }
.gb-lead { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.9; color: var(--text); margin: 0; max-width: 60ch; }
.gb-setup { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(16px, 2.4vw, 22px); display: grid; gap: 14px; margin-top: 8px; }
.gb-setup-head { display: flex; gap: 12px; align-items: center; }
.gb-setup-head .pg-i { width: 30px; height: 30px; --i-fill: #E0A21A; --i-fill-o: .22; }
.gb-setup-head strong { display: block; color: var(--ink); font-size: 16px; }
.gb-setup-head span { font-size: 13.5px; color: var(--muted); }
.gb-setup-row { display: grid; gap: 8px; }
.gb-setup-row > span { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (min-width: 640px) { .gb-setup-row { grid-template-columns: 92px minmax(0, 1fr); align-items: center; } }
.gb-setup-note { margin: 0; font-size: 13px; color: var(--muted); }
.gb-hero-art { position: relative; display: none; justify-content: center; padding-block: 12px; }
@media (min-width: 980px) { .gb-hero-art { display: flex; } }
.gb-rings { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; }
.gb-rings i { position: absolute; border: 1px solid var(--ring-faint); border-radius: 50%; translate: -50% -50%; }
.gb-rings i:nth-child(1) { width: 380px; height: 380px; }
.gb-rings i:nth-child(2) { width: 520px; height: 520px; }
.gb-rings i:nth-child(3) { width: 660px; height: 660px; }
.gb-hero-art .ph { position: relative; rotate: -4deg; }

/* segmented choices */
.gb-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-seg button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.gb-seg button:hover { border-color: var(--line-strong); }
.gb-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.gb-seg button[aria-pressed="true"] .pg-i { color: #fff; --i-fill: #fff; --i-ring: var(--ink); }
.gb-seg .pg-i { width: 20px; height: 20px; }
.gb-seg.big button { padding: 10px 18px; font-size: 15px; }
.gb-seg.sm button { padding: 6px 12px; font-size: 13px; }
.gb-seg button:focus-visible, .gb-methods button:focus-visible, .gb-step > button:focus-visible, .gb-fixcat:focus-visible, .gb-check button:focus-visible, .gb-rail a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gb-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-block: 16px; }

/* route rail: the stops, sticky under the header */
.gb-rail { position: sticky; top: calc(var(--notice-h, 0px) + 58px); z-index: 30; margin-top: clamp(22px, 3.4vw, 40px); max-width: none; padding-inline: 0; background: rgba(246, 245, 241, .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.gb-rail ol { position: relative; list-style: none; margin: 0 auto; max-width: 1120px; padding: 8px var(--pad-x); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.gb-rail ol::-webkit-scrollbar { display: none; }
.gb-rail li { flex: 1 0 auto; position: relative; }
.gb-rail li + li::before { content: ""; position: absolute; inset-inline-start: -2px; top: 50%; width: 0; }
.gb-rail a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--text); white-space: nowrap; }
.gb-rail a b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--line-strong); font: 600 12px var(--font-mono); color: var(--muted); flex: none; }
.gb-rail a strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.gb-rail a small { display: none; font-size: 11.5px; color: var(--muted); }
@media (min-width: 1000px) { .gb-rail a small { display: block; } }
.gb-rail a:hover { background: #fff; }
.gb-rail a.on { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gb-rail a.on b { background: var(--red); border: 1.5px solid var(--red); color: #fff; }

/* section heads */
.gb-head { display: grid; gap: 8px; margin-bottom: 20px; max-width: 760px; }
.gb-head h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.3; margin: 0; }
.gb-head p:last-child { margin: 0; font-size: 16px; line-height: 1.85; }
.gb-note { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.gb-note.warn { background: #FBF1DF; border-inline-start: 4px solid #D9941A; border-radius: 12px; padding: 10px 14px; color: var(--ink); }
.gb-mini { padding: 8px 14px; font-size: 14px; gap: 6px; margin-top: 10px; }
.gb-mini .pg-i { width: 20px; height: 20px; }
.gb-link { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }

.gb-chip { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--blue-50); border: 1px solid var(--sky); color: var(--blue-deep); font-weight: 600; font-size: .93em; line-height: 1.75; white-space: nowrap; }
.gb-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; }
.gb-path > span { font-size: 12.5px; color: var(--muted); margin-inline-end: 2px; }
.gb-path i { font-style: normal; color: var(--muted); }
.gb-apn { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--paper); border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 8px; padding-inline-start: 14px; }
.gb-apn span { font-size: 13px; color: var(--muted); }
.gb-apn code { flex: 1; font: 600 17px var(--font-mono); color: var(--ink); background: none; border: 0; padding: 0; text-align: start; }
.gb-apn button, .gb-pass button { border: 0; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.gb-apn button.copied, .gb-pass button.copied { background: var(--green); color: #fff; }
.gb-warn, .gb-tip { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.8; color: var(--ink); }
.gb-warn { background: #FDECEA; border: 1px solid #F3C4BF; }
.gb-warn .pg-i { --i-fill: var(--red); --i-fill-o: .2; color: #B3261E; }
.gb-tip { background: #FFF9EC; border: 1px solid #F2E2BE; }
.gb-tip .pg-i { --i-fill: #E0A21A; --i-fill-o: .22; }
.gb-warn .pg-i, .gb-tip .pg-i { width: 22px; height: 22px; margin-top: 2px; }

/* 1. checklist */
.gb-checks { display: grid; gap: 12px; }
@media (min-width: 760px) { .gb-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gb-check { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; transition: border-color .2s, background .2s; }
.gb-check.on { border-color: var(--green-100); background: #FBFEFC; }
.gb-check > button { flex: none; width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--line-strong); background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .15s, border-color .15s; }
.gb-check > button i { width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -2px; opacity: 0; }
.gb-check > button[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.gb-check > button[aria-checked="true"] i { opacity: 1; }
.gb-check strong { color: var(--ink); font-size: 16px; }
.gb-check p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.8; }
.gb-check-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.gb-meter { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--seg) 0); flex: none; }
.gb-meter b { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 600 12px var(--font-mono); color: var(--ink); }

/* 2–3. stepper */
.gb-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.gb-methods button { text-align: start; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 16px; font: inherit; cursor: pointer; display: grid; gap: 2px; transition: border-color .15s, background .15s; }
.gb-methods button strong { color: var(--ink); font-size: 15.5px; }
.gb-methods button small { color: var(--muted); font-size: 13px; }
.gb-methods button[aria-pressed="true"] { border-color: var(--blue); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--blue); }
.gb-stepper { display: grid; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(14px, 3vw, 30px); grid-template-areas: "steps" "stage" "nav"; }
.gb-steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
.gb-stage { grid-area: stage; display: flex; justify-content: center; align-items: flex-start; background: var(--paper); border-radius: 20px; padding: 18px 10px; }
.gb-stepnav { grid-area: nav; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gb-stepnav span { font-size: 13px; color: var(--muted); }
.gb-stepnav .btn { padding: 11px 18px; font-size: 14.5px; }
.gb-stepnav .btn[disabled] { opacity: .4; pointer-events: none; }
.gb-step > button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 0; background: none; padding: 9px 8px; border-radius: 12px; font: inherit; cursor: pointer; color: var(--text); }
.gb-step > button:hover { background: var(--paper); }
.gb-step > button > b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font: 600 13px var(--font-mono); color: var(--muted); }
.gb-step > button strong { font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.gb-step.done > button > b { background: var(--green-50); border-color: var(--green-100); color: var(--green-text); }
.gb-step.on > button > b { background: var(--blue); border-color: var(--blue); color: #fff; }
.gb-step.on > button strong { font-weight: 600; color: var(--ink); font-size: 17px; }
.gb-step-body { display: none; padding-inline-start: 48px; padding-bottom: 10px; font-size: 15.5px; line-height: 1.9; }
.gb-step.on .gb-step-body { display: block; }
.gb-step-body p:first-child { margin: 0; }
@media (max-width: 859px) { .gb-step:not(.on) { display: none; } .gb-step-body { padding-inline-start: 0; } .gb-stepper { grid-template-areas: "steps" "nav" "stage"; } .gb-stage .ph { zoom: .88; } }
@media (min-width: 860px) {
  .gb-stepper { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "steps stage" "nav stage"; gap: 18px 32px; }
  .gb-stage { align-self: start; padding: 26px 10px; }
  .gb-stepnav { align-self: end; }
}

/* plan card, drawn as a boarding pass */
.gb-pass { margin-top: 16px; background: var(--ink); color: #D9DBE1; border-radius: 22px; overflow: hidden; }
.gb-pass-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1.5px dashed rgba(255, 255, 255, .22); }
.gb-pass-top strong { color: #fff; font-size: 17px; }
.gb-pass-tag { font: 600 11px var(--font-mono); letter-spacing: .12em; color: #9CC3FF; }
.gb-pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; padding: 18px 20px 20px; }
.gb-pass-grid span { font-size: 12.5px; color: #A9ADB8; }
.gb-pass-grid strong { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-top: 2px; line-height: 1.6; }
.gb-pass-grid strong span { font-size: inherit; color: inherit; }
.gb-pass-apn { display: inline-flex; align-items: center; gap: 8px; }
.gb-pass-apn code { font: 600 15px var(--font-mono); background: none; border: 0; padding: 0; color: #fff; }
.gb-pass button { background: #fff; color: var(--ink); padding: 5px 10px; font-size: 12px; }
.gb-pass.empty { background: #fff; border: 1.5px dashed var(--line-strong); color: var(--text); padding: 18px 20px; display: grid; gap: 10px; }
.gb-pass.empty strong { color: var(--ink); font-size: 16px; }
.gb-pass.empty p { margin: 0; font-size: 14.5px; }
.gb-pass.empty button { background: #fff; padding: 8px 14px; font-size: 14px; }
.gb-pass.empty button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 4. trip cards */
.gb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.gb-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.gb-card .pg-i { width: 30px; height: 30px; margin-bottom: 4px; }
.gb-card h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.gb-card p { margin: 0; font-size: 14.5px; line-height: 1.85; }

.gb-after { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.gb-after > .pg-i { width: 30px; height: 30px; margin-top: 2px; }
.gb-after h3 { margin: 0; font-size: 18px; }
.gb-after p { margin: 2px 0 0; font-size: 14.5px; }
.gb-after ol { margin: 10px 0 0; padding-inline-start: 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.8; }
.gb-after li::marker { color: var(--blue); font-weight: 600; }
.gb-after li > span { color: var(--ink); }
.gb-after .gb-path { margin-top: 4px; }

/* 5. warnings */
.gb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .gb-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gb-rules { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gb-rule { grid-column: span 3; } .gb-rule:nth-child(n + 4) { grid-column: span 2; } }
.gb-rule { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; }
.gb-rule-n { font: 600 14px var(--font-mono); color: var(--red); padding-top: 3px; flex: none; }
.gb-rule h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.gb-rule p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.85; }
.gb-rule em { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.gb-rule.top { grid-column: 1 / -1; background: #FDECEA; border: 1.5px solid var(--red); padding: clamp(18px, 3vw, 26px); }
.gb-rule.top h3 { font-size: clamp(20px, 2.6vw, 26px); }
.gb-rule.top p { font-size: 15.5px; color: var(--ink); max-width: 70ch; }
.gb-rule.top .gb-rule-n { font-size: clamp(26px, 4vw, 40px); padding-top: 0; line-height: 1.2; }

/* 6. problem solver */
.gb-fixcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.gb-fixcat { display: flex; align-items: center; gap: 12px; text-align: start; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.gb-fixcat:hover { border-color: var(--blue); transform: translateY(-2px); }
.gb-fixcat .pg-i { width: 28px; height: 28px; }
.gb-fixcat span { flex: 1; line-height: 1.6; }
.gb-fixcat small { font-size: 11.5px; font-weight: 600; color: #B3261E; background: #FDECEA; border-radius: 999px; padding: 2px 9px; }
.gb-fixother { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; background: none; border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 12px 16px; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; text-align: start; }
.gb-fixother:hover { border-color: var(--ink); color: var(--ink); }
.gb-fix { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(16px, 3vw, 30px); display: grid; gap: 18px; }
.gb-fix-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; grid-column: 1 / -1; }
.gb-fix-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gb-fix-chip .pg-i { width: 20px; height: 20px; }
.gb-dots { display: flex; gap: 6px; }
.gb-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--seg); transition: width .2s, background .2s; }
.gb-dots i.done { background: var(--green); }
.gb-dots i.on { width: 24px; background: var(--blue); }
.gb-fix-tx { display: grid; gap: 4px; align-content: start; min-width: 0; }
.gb-fix-count { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--red); }
.gb-fix h3 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45; }
.gb-fix-tx > p { margin: 4px 0 0; font-size: 16px; line-height: 1.9; }
.gb-nets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; justify-content: flex-end; }
html[dir="ltr"] .gb-nets { justify-content: flex-start; }
.gb-nets b { font: 600 13px var(--font-mono); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; color: var(--ink); }
.gb-fix-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px 10px; }
.gb-fix-actions .btn { padding: 12px 20px; font-size: 15px; gap: 6px; }
.gb-yes { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-text); }
.gb-yes:hover { background: var(--green-100); }
.gb-yes .pg-i { width: 20px; height: 20px; color: var(--green-text); }
.gb-fix-ph { display: flex; justify-content: center; background: var(--paper); border-radius: 20px; padding: 16px 8px; }
@media (min-width: 860px) { .gb-fix.has-ph { grid-template-columns: minmax(0, 1fr) 270px; column-gap: 32px; } }
.gb-fix-end { justify-items: center; text-align: center; gap: 10px; }
.gb-fix-end p { margin: 0; max-width: 52ch; font-size: 16px; }
.gb-fix-big { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); margin-top: 6px; }
.gb-fix-big .pg-i { width: 34px; height: 34px; }
.gb-fix-end.ok .gb-fix-big { background: var(--green-50); }
.gb-fix-end.ok .gb-fix-big .pg-i { color: var(--green-text); stroke-width: 2.2; }
.gb-tried { list-style: none; margin: 6px 0 0; padding: 12px 16px; background: var(--paper); border-radius: 14px; display: grid; gap: 4px; font-size: 14px; text-align: start; width: min(100%, 460px); }
.gb-tried li { display: flex; gap: 8px; }
.gb-tried li::before { content: "✓"; color: var(--muted); }
.gb-fix-end .gb-shots { font-size: 14.5px; background: #FFF9EC; border: 1px solid #F2E2BE; border-radius: 14px; padding: 10px 14px; color: var(--ink); text-align: start; }
.gb-lockhow { margin: 6px 0 0; }
.gb-fix-end .gb-fix-actions { justify-content: center; margin-block: 12px 4px; }
.gb-fix-end .gb-link { justify-self: center; }

/* FAQ + plans band */
.gb-faqsec h2 { font-size: clamp(22px, 2.8vw, 28px); margin: 0 0 8px; }
.gb-faq { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 4px 20px; }
.gb-faq details { border-bottom: 1px solid var(--divider); padding-block: 14px; }
.gb-faq details:last-child { border-bottom: 0; }
.gb-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 16px; }
.gb-faq details p { margin: 8px 0 0; font-size: 15px; line-height: 1.9; }
.gb-cta { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; border-radius: 20px; padding: 20px 24px; background: var(--ink); margin-top: 22px; }
.gb-cta strong { color: #fff; font-size: 18px; }
.gb-cta p { margin: 2px 0 0; color: #D9DBE1; font-size: 15px; }
.gb-cta .btn { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- the drawn phone ---------- */
.ph { --ph-bg: #F0EEE8; --ph-line: #ECE9E2; width: 264px; height: 536px; flex: none; background: var(--ink); border-radius: 44px; padding: 9px; box-shadow: 0 24px 48px -18px rgba(38, 42, 51, .45), inset 0 0 0 1.5px #4A4F5C; }
.ph.sm { zoom: .84; }
.ph-scr { height: 100%; background: var(--ph-bg); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); font-size: 12.5px; line-height: 1.5; animation: ph-in .28s ease both; }
@keyframes ph-in { from { opacity: .35; transform: translateY(6px); } }
.ph-status { display: flex; align-items: center; justify-content: space-between; padding: 11px 22px 4px; font: 600 11px var(--font-mono); direction: ltr; }
.ph-notch { width: 66px; height: 19px; border-radius: 99px; background: var(--ink); }
.ph-sig { display: inline-flex; align-items: center; gap: 5px; min-width: 34px; justify-content: flex-end; }
.ph-sig em { font-style: normal; font-size: 10px; }
.ph-bars { width: 15px; height: 11px; fill: currentColor; }
.ph-head { padding: 8px 16px 8px; display: grid; gap: 2px; }
.ph-head strong { font-size: 16px; font-weight: 600; }
.ph-head.big strong { font-size: 24px; font-weight: 700; padding-top: 8px; }
.ph-back { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: 12px; }
.ph-chev { width: 7px; height: 7px; border: solid #B5B1A6; border-width: 1.7px 1.7px 0 0; flex: none; rotate: 45deg; }
.ph-scr[dir="rtl"] .ph-chev { rotate: -135deg; }
.ph-scr .ph-back .ph-chev { border-color: var(--blue); rotate: -135deg; }
.ph-scr[dir="rtl"] .ph-back .ph-chev { rotate: 45deg; }
.ph-tabs { display: flex; gap: 6px; padding: 0 12px 8px; }
.ph-tabs span { flex: 1; text-align: center; padding: 5px; border-radius: 99px; background: #fff; font-size: 11.5px; color: var(--muted); }
.ph-tabs span.on { background: var(--ink); color: #fff; font-weight: 600; }
.ph-body { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.ph-gh { display: block; font-size: 10.5px; color: var(--muted); padding: 0 10px 4px; }
.ph-rows { background: #fff; border-radius: 13px; }
.ph-row { position: relative; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 11px; }
.ph-row + .ph-row { border-top: 1px solid var(--ph-line); }
.ph-l { flex: 1; min-width: 0; }
.ph-l small { display: block; font-size: 9.5px; color: var(--muted); }
.ph-v { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.ph-row.link .ph-l { color: var(--blue); font-weight: 600; }
.ph-tog { width: 32px; height: 19px; border-radius: 99px; background: #D9D6CE; position: relative; flex: none; }
.ph-tog::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ph-tog.on { background: var(--green); }
.ph-tog.on::after { inset-inline-start: 15px; }
.ph-check { width: 11px; height: 6px; border: solid var(--blue); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -2px; flex: none; margin-inline: 3px; }
/* where to tap */
.ph .hl { position: relative; background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--blue); border-radius: 11px; border-top-color: transparent; }
.ph .hl + .ph-row { border-top-color: transparent; }
.ph .hl::after { content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(26, 111, 224, .2); box-shadow: 0 0 0 2px rgba(26, 111, 224, .35); animation: ph-tap 1.6s ease-out infinite; pointer-events: none; }
@keyframes ph-tap { 0% { transform: scale(.45); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.ph .ph-field.hl::after { display: none; }
.ph-btn { display: block; text-align: center; background: var(--blue); color: #fff; border-radius: 13px; padding: 10px; font-weight: 600; font-size: 12.5px; }
.ph .ph-btn.hl { background: var(--blue); box-shadow: 0 0 0 3px rgba(26, 111, 224, .28); }
.ph .ph-btn.hl { animation: ph-glow 1.6s ease-in-out infinite; }
.ph .ph-btn.hl::after { display: none; }
@keyframes ph-glow { 50% { box-shadow: 0 0 0 7px rgba(26, 111, 224, .14); } }
.ph-sheet { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 30px 14px 16px; text-align: center; }
.ph-sheet > strong { font-size: 18px; }
.ph-sheet .ph-group { text-align: start; }
.ph-sheet-ic { align-self: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ph-sheet-ic .pg-i { width: 30px; height: 30px; }
.ph-sheet .ph-btn { margin-top: auto; }
.ph-wait { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.ph-wait i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--blue); animation: ph-spin 1s linear infinite; }
@keyframes ph-spin { to { rotate: 360deg; } }
.ph-cam { flex: 1; margin: 0 10px; border-radius: 20px; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(255, 255, 255, .75); font-size: 11.5px; }
.ph-frame { position: relative; width: 136px; height: 136px; background: #fff; border-radius: 16px; padding: 12px; color: var(--ink); overflow: hidden; }
.ph-frame.light { border: 1px solid var(--line); align-self: center; }
.ph-qr { display: block; width: 100%; height: 100%; }
.ph-scanline { position: absolute; inset-inline: 6px; top: 8px; height: 2.5px; border-radius: 9px; background: var(--red); box-shadow: 0 0 10px 2px rgba(224, 69, 58, .45); animation: ph-scan 2.2s ease-in-out infinite alternate; }
@keyframes ph-scan { to { top: calc(100% - 10px); } }
.ph-foot { margin: 10px; padding: 9px; text-align: center; color: var(--blue); font-weight: 600; border-radius: 11px; }
.ph-field { position: relative; background: #fff; border-radius: 13px; padding: 8px 11px; }
.ph-field small { display: block; font-size: 10.5px; color: var(--muted); }
.ph-field code { display: block; font: 500 12px var(--font-mono); color: var(--ink); background: none; border: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.ph-order { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px; text-align: center; background: #fff; }
.ph-logo { font-weight: 700; font-size: 15px; color: var(--blue); }
.ph-order > strong { font-size: 17px; }
.ph-order .ph-btn { margin-top: auto; }
.ph-live { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-bottom: 30px; }
.ph-live > strong { font-size: 20px; margin-top: 14px; }
.ph-net { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--font-mono); }
.ph-live small { color: var(--muted); }
.ph-ping { position: relative; width: 78px; height: 78px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.ph-ping b { width: 28px; height: 15px; border: solid #fff; border-width: 0 0 4px 4px; rotate: -45deg; translate: 0 -4px; }
.ph-ping i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); animation: ph-ring 2.4s ease-out infinite; }
.ph-ping i + i { animation-delay: 1.2s; }
@keyframes ph-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
/* frames: Samsung (punch-hole camera, tall titles, rounder groups) and Huawei (corner camera, flat titles) */
.ph-sam { border-radius: 38px; }
.ph-sam .ph-scr { border-radius: 30px; }
.ph-sam .ph-notch { width: 11px; height: 11px; }
.ph-sam .ph-head { padding-top: 22px; }
.ph-sam .ph-head strong { font-size: 19px; }
.ph-sam .ph-rows { border-radius: 18px; }
.ph-sam .ph-row { min-height: 42px; }
.ph-hw { border-radius: 40px; }
.ph-hw .ph-scr { border-radius: 32px; }
.ph-hw .ph-status { justify-content: flex-start; gap: 10px; }
.ph-hw .ph-notch { width: 26px; height: 12px; order: -1; }
.ph-hw .ph-sig { margin-inline-start: auto; }
.ph-hw .ph-head.big strong { font-size: 20px; }
.ph-hw .ph-rows { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ph-scr, .ph .hl::after, .ph .ph-btn.hl, .ph-scanline, .ph-ping i, .ph-wait i { animation: none; }
  .ph .hl::after { opacity: 1; transform: none; }
}