/* Safari phone screens (info/safari-screens.php), lifted from the old For organizers page: only the rules its markup uses,
   scoped to .di-safari, fonts swapped to ours (Archivo for its condensed display, Geist for text). */
.devt .di-safari{--orange:      #7D53FF; --orange-dark: #6B3FE0; --orange-pale: #F5F0FF; --orange-mid:  #DDD6FE; --navy:        #0F172A; --navy2:       #1E293B; --text:        #1E293B; --muted:       #5A6880; --light:       #94A3B8; --bg:          #FFFFFF; --bg-alt:      #F8FAFC; --bg-warm:     #F7F5FF; --border:      #E2E8F0; --border-warm: #EDE9FE; --green:       #15803D; --purple:      #6D28D9; --red:         #D02A1F; --gold:        #B45309; --cyan:        #0E7490;}
.devt .di-safari .dash-showcase{padding: 80px 0 40px; background: var(--bg-alt);}
.devt .di-safari .dash-showcase-inner{max-width: 960px; margin: 0 auto; padding: 0 24px; text-align: center;}
.devt .di-safari .msw-wrap{display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap;}
.devt .di-safari .msw-btn{display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 12px; border: 2px solid var(--border); background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); transition: all 0.2s; font-family:var(--sans);}
.devt .di-safari .msw-btn.active,.devt .di-safari #msw-bms:checked ~ .dash-showcase-inner label[for="msw-bms"],.devt .di-safari #msw-cms:checked ~ .dash-showcase-inner label[for="msw-cms"],.devt .di-safari #msw-wms:checked ~ .dash-showcase-inner label[for="msw-wms"]{border-color: var(--orange); color: var(--navy); background: var(--orange-pale);}
.devt .di-safari .msw-radio:focus-visible ~ .dash-showcase-inner label[for="msw-bms"],.devt .di-safari .msw-radio:focus-visible ~ .dash-showcase-inner label[for="msw-cms"],.devt .di-safari .msw-radio:focus-visible ~ .dash-showcase-inner label[for="msw-wms"]{outline: 3px solid var(--orange); outline-offset: 3px;}
.devt .di-safari .msw-dot{width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}
.devt .di-safari .msw-radio{position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.devt .di-safari .dash-panel{display: none;}
.devt .di-safari #msw-bms:checked ~ #dash-bms,.devt .di-safari #msw-cms:checked ~ #dash-cms,.devt .di-safari #msw-wms:checked ~ #dash-wms{display: block;}
.devt .di-safari .phones-scroll{overflow-x: auto; padding: 36px 32px 24px; -webkit-overflow-scrolling: touch;}
.devt .di-safari .phones-scroll::-webkit-scrollbar{height: 4px;}
.devt .di-safari .phones-scroll::-webkit-scrollbar-track{background: transparent;}
.devt .di-safari .phones-scroll::-webkit-scrollbar-thumb{background: var(--border); border-radius: 2px;}
.devt .di-safari .phones-row{display: flex; gap: 20px; width: max-content;}
@media (min-width: 1160px){.devt .di-safari .phones-scroll{overflow-x: visible;}.devt .di-safari .phones-row{width: auto; justify-content: center; flex-wrap: wrap;}}
.devt .di-safari .role-show{width: 200px; display: flex; flex-direction: column; align-items: center; gap: 14px;}
.devt .di-safari .rs-top{text-align: center;}
.devt .di-safari .rs-icon{font-size: 26px; margin-bottom: 5px;}
.devt .di-safari .rs-name{font-size: 15px; font-weight: 800; color: var(--navy);}
.devt .di-safari .rs-tag{display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 5px;}
.devt .di-safari .phone{width: 200px; height: 400px; border-radius: 32px; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.1);}
.devt .di-safari .phone-bms{background: #09090f; border: 2px solid rgba(124,58,237,0.35);}
.devt .di-safari .phone-cms{background: #030d1a; border: 2px solid rgba(56,189,248,0.3);}
.devt .di-safari .ph-notch{width: 72px; height: 20px; background: #000; border-radius: 0 0 14px 14px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10;}
.devt .di-safari .rs-desc{background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; width: 100%;}
.devt .di-safari .rs-desc-title{font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 9px;}
.devt .di-safari .rs-desc-list{list-style: none; display: flex; flex-direction: column; gap: 5px;}
.devt .di-safari .rs-desc-list li{font-size: 13.5px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.55;}
.devt .di-safari .rs-desc-list li::before{content: '→'; color: var(--orange); font-weight: 800; flex-shrink: 0;}
.devt .di-safari .dash-module-label{display: flex; align-items: center; gap: 12px; max-width: 960px; margin: 32px auto 0; padding: 0 32px;}
.devt .di-safari .dml-line{flex: 1; height: 1px;}
.devt .di-safari .dml-text{font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center;}
.devt .di-safari{--orange:      #7B3AED; --orange-dark: #6D28D9; --orange-pale: #F5F3FF; --orange-mid:  #DDD6FE;}
.devt .di-safari{--clay-purple: inset 0 2px 2px rgba(255,255,255,0.40), inset 0 -4px 9px rgba(55,18,115,0.32), 0 12px 26px rgba(123,58,237,0.32), 0 3px 7px rgba(123,58,237,0.20); --clay-purple-hi: inset 0 2px 2px rgba(255,255,255,0.40), inset 0 -4px 9px rgba(55,18,115,0.32), 0 20px 40px rgba(123,58,237,0.38), 0 5px 12px rgba(123,58,237,0.22); --clay-purple-in: inset 0 4px 10px rgba(55,18,115,0.42), inset 0 -1px 2px rgba(255,255,255,0.25), 0 2px 4px rgba(123,58,237,0.18); --clay-white: inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -4px 9px rgba(71,55,110,0.13), 0 12px 26px rgba(30,41,59,0.13), 0 3px 7px rgba(30,41,59,0.08); --clay-white-hi: inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -4px 9px rgba(71,55,110,0.13), 0 20px 40px rgba(30,41,59,0.17), 0 5px 12px rgba(30,41,59,0.10); --clay-white-in: inset 0 4px 10px rgba(71,55,110,0.20), inset 0 -1px 2px rgba(255,255,255,0.85), 0 2px 4px rgba(30,41,59,0.08); --clay-ease: cubic-bezier(0.22, 0.61, 0.36, 1);}
.devt .di-safari .wa-btn,.devt .di-safari .btn-outline,.devt .di-safari .ql-link,.devt .di-safari .plan-btn.outline,.devt .di-safari .msw-btn{box-shadow: var(--clay-white); transition: transform 0.26s var(--clay-ease), box-shadow 0.26s var(--clay-ease), border-color 0.2s, color 0.2s, background 0.2s;}
.devt .di-safari .wa-btn:hover,.devt .di-safari .btn-outline:hover,.devt .di-safari .ql-link:hover,.devt .di-safari .plan-btn.outline:hover,.devt .di-safari .msw-btn:hover{transform: translateY(-2px); box-shadow: var(--clay-white-hi);}
.devt .di-safari .wa-btn:active,.devt .di-safari .btn-outline:active,.devt .di-safari .ql-link:active,.devt .di-safari .plan-btn.outline:active,.devt .di-safari .msw-btn:active{transform: translateY(1px); box-shadow: var(--clay-white-in);}
.devt .di-safari .msw-btn.active,.devt .di-safari #msw-bms:checked ~ .dash-showcase-inner label[for="msw-bms"],.devt .di-safari #msw-cms:checked ~ .dash-showcase-inner label[for="msw-cms"],.devt .di-safari #msw-wms:checked ~ .dash-showcase-inner label[for="msw-wms"]{box-shadow: var(--clay-purple); background: linear-gradient(180deg,#8B4FF5 0%,var(--orange) 52%,#5F21C4 100%); color: #fff; border-color: transparent;}
.devt .di-safari #msw-bms:checked ~ .dash-showcase-inner label[for="msw-bms"] .msw-dot,.devt .di-safari #msw-cms:checked ~ .dash-showcase-inner label[for="msw-cms"] .msw-dot,.devt .di-safari #msw-wms:checked ~ .dash-showcase-inner label[for="msw-wms"] .msw-dot{box-shadow: 0 0 0 2px rgba(255,255,255,0.35);}
@media (prefers-reduced-motion: reduce){.devt .di-safari .btn-primary,.devt .di-safari .nav-cta,.devt .di-safari .ql-book,.devt .di-safari .buzz-btn,.devt .di-safari .plan-btn,.devt .di-safari .wa-btn,.devt .di-safari .btn-outline,.devt .di-safari .ql-link,.devt .di-safari .msw-btn{transition: none;}}
.devt .di-safari .role-show{width: 327px;}
.devt .di-safari .phone{width: 327px; height: 606px;}
.devt .di-safari .phone-wms{background: #04120b; border: 2px solid rgba(48,209,88,0.32);}
.devt .di-safari .app{width: 375px; height: 700px; transform: scale(0.86); transform-origin: top left; overflow: hidden; background: #000; color: #fff; flex-shrink: 0; font-family:var(--sans); --a-surface:#1C1C1E; --a-surface-2:#2C2C2E; --a-sep:#38383A; --a-l2:rgba(235,235,245,0.60); --a-l3:rgba(235,235,245,0.45); --a-tint:#0A84FF; --a-tint-bg:rgba(10,132,255,0.16); --a-success:#30D158; --a-success-bg:rgba(48,209,88,0.16); --a-danger:#FF453A;  --a-danger-bg:rgba(255,69,58,0.16); --a-warning:#FF9F0A; --a-warning-bg:rgba(255,159,10,0.16); --a-accent:#FFD60A;  --a-brand:#8116E0; --a-cat-1:#0A84FF; --a-cat-2:#30D158; --a-cat-3:#5E5CE6; --a-cat-4:#FF9F0A; --a-cat-5:#FF375F; --a-medal:#FFD700;}
.devt .di-safari .app-pad{padding: 18px 20px 0;}
.devt .di-safari .disp{font-family:var(--display);font-stretch:70%; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; line-height: 1.05;}
.devt .di-safari .a-sb{display: flex; justify-content: space-between; align-items: center; padding: 36px 20px 2px; font-size: 13px; font-weight: 600; color: #fff;}
.devt .di-safari .a-logo{width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; font-family:var(--display);font-stretch:70%; font-weight: 700; font-size: 22px; color: #fff;}
.devt .di-safari .a-title{font-family:var(--display);font-stretch:70%; font-weight: 600; font-size: 38px; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: #fff;}
.devt .di-safari .a-dot{width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: a-pulse 1.5s infinite;}
.devt .di-safari .a-head{font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3;}
.devt .di-safari .a-body{font-size: 15px; font-weight: 400; line-height: 1.45;}
.devt .di-safari .a-sub{font-size: 13px; font-weight: 400; line-height: 1.4;}
.devt .di-safari .a-cap{font-size: 13px; font-weight: 500; line-height: 1.35;}
.devt .di-safari .a-lab{font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.3;}
.devt .di-safari .a-l2c{color: var(--a-l2);}
.devt .di-safari .a-l3c{color: var(--a-l3);}
.devt .di-safari .a-tabs{display: flex; border-bottom: 1px solid var(--a-sep); margin-top: 14px; overflow: hidden;}
.devt .di-safari .a-tab{font-size: 13px; font-weight: 600; padding: 12px 14px; color: var(--a-l2); border-bottom: 2px solid transparent; white-space: nowrap;}
.devt .di-safari .a-tab.on{color: #fff; border-bottom-color: var(--a-tint);}
.devt .di-safari .a-tabs.sc .a-tab{padding: 12px 0; margin-right: 20px;}
.devt .di-safari .a-card{background: var(--a-surface); border: 1px solid var(--a-sep); border-radius: 12px; padding: 15px; margin-bottom: 11px;}
.devt .di-safari .a-row{display: flex; align-items: center; gap: 10px; background: var(--a-surface); border: 1px solid var(--a-sep); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px;}
.devt .di-safari .a-badge{display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px;}
.devt .di-safari .a-sep{height: 1px; background: var(--a-sep); margin: 13px 0;}
.devt .di-safari .a-grow{flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.devt .di-safari .a-track{height: 6px; border-radius: 999px; background: var(--a-surface-2); position: relative; margin: 11px 0;}
.devt .di-safari .a-fill{position: absolute; inset: 0 auto 0 0; border-radius: 999px;}
.devt .di-safari .a-thumb{position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--a-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.3); transform: translate(-50%,-50%);}
.devt .di-safari .a-btn{border-radius: 10px; font-size: 15px; font-weight: 600; padding: 11px 18px; text-align: center;}
.devt .di-safari .a-stats{display: flex; gap: 15px; margin-top: 13px;}
@keyframes a-pulse{ 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* In our page: no section padding or grey band of its own, heading on the left like every other section, the phone row
   scrolls inside itself (contain stops it widening the column) */
.devt .di-safari .dash-showcase{padding:0;background:none}
.devt .di-safari .dash-showcase-inner{max-width:none;margin:0;padding:0;text-align:left}
.devt .di-safari .msw-wrap{justify-content:flex-start}
.devt .di-safari .phones-scroll{contain:inline-size;margin:0 -16px;padding:32px 16px 24px}