/* Responsive layer, loaded last on every page. Fixes header stacking and wrapping, keeps the mega menu
   inside the screen, and tightens layouts at tablet and phone widths. */

/* header always sits above sticky page chrome (the "on this page" chips, sticky rails) */
.nav{z-index:1000 !important}
.mnav{z-index:999 !important}
.eg_chips{top:64px !important;z-index:40 !important}
.nav_logo,.nav_logo::after,.nav_cta,.nav_links > a,.nav_links > .dd > a{white-space:nowrap}
.mega_panel,.dd_menu{white-space:normal}

/* mega menu: never taller than the screen */
.mega_panel{max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}

/* laptop widths: compact the link row before it collides with search, language and the demo button */
@media (max-width:1320px){
  .nav_links{gap:14px !important;padding:0 14px !important;font-size:13.5px}
  .nav_logo{padding:0 16px 0 16px !important}
  .nav_cell{padding:0 12px !important}
  .nav_cta{padding:0 18px !important}
  .mega_panel.cols{padding:22px 20px !important;gap:20px !important}
  .mega_panel.cols.sol{grid-template-columns:1fr 1fr 1fr 240px !important}
  .mega_panel.cols.hw,.mega_panel.cols.res{grid-template-columns:1.4fr 1fr 240px !important}
  .mega_list a{font-size:14px}
}
@media (max-width:1180px){
  .nav_cell.hide-m:not([aria-label="Search"]){display:none !important}
}
@media (max-width:1100px){
  .nav_links,.nav_cell.hide-m{display:none !important}
  .nav_burger{display:flex !important}
}

/* phones */
@media (max-width:600px){
  .nav_logo{padding:0 12px !important;gap:8px !important}
  .nav_logo img{height:26px !important}
  .nav_logo::after{font-size:16px !important}
  .nav_burger{width:52px}
  .nav_cta{font-size:13px !important;padding:0 14px !important;gap:8px !important}
  .nav_cta svg{display:none}
  .eg_top{bottom:84px !important}
}
@media (max-width:360px){
  .nav_logo{padding:0 10px !important;gap:6px !important}
  .nav_logo img{height:22px !important}
  .nav_logo::after{font-size:15px !important}
  .nav_burger{width:46px !important}
  .nav_cta{font-size:12.5px !important;padding:0 10px !important;gap:6px !important}
}
/* single column layouts must be allowed to shrink below their content's natural width */
@media (max-width:900px){
  .eg_story{grid-template-columns:minmax(0,1fr) !important}
  .eg_story > *,.eg_step,.rrow,.rrow_t,.rrow_v{min-width:0}
}

/* general safety at small widths: long words, wide media and tables never push the page sideways */
@media (max-width:900px){
  h1,h2,h3{overflow-wrap:break-word}
  img,video,iframe,svg{max-width:100%}
  table{display:block;max-width:100%;overflow-x:auto}
}

/* ---------- home hero on phones and small tablets (home-mobile.js) ---------- */
.mh-on .hero{height:auto !important}
.mh-on .stage{position:relative !important;height:auto !important;overflow:visible !important;padding:88px 16px 34px;background:linear-gradient(180deg,#f1f2f3,#e9edf1)}
.mh-on #world,.mh-on .stage_grad,.mh-on .hotspots,.mh-on .rail,.mh-on .demo_note,.mh-on .loader,.mh-on .scroll_hint{display:none !important}
.mh-on .hero_box{position:static !important;width:auto !important;padding:0 !important;background:none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.mh-on .hero_box h1{font-size:28px !important;line-height:1.14 !important;margin-bottom:12px !important}
.mh-on .hero_box p{font-size:15px;line-height:1.55;margin-bottom:18px;color:#3d4653}
.mh-on .hero_box .pill{height:40px;padding:0 16px;font-size:14.5px}
.mh{margin-top:30px;display:grid;gap:14px;min-width:0}
.mh_head{display:flex;justify-content:space-between;align-items:baseline}
.mh_k,.mh_count,.mh_tag,.mh_num{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5f6b7a}
.mh_count{font-variant-numeric:tabular-nums}
.mh_tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.mh_tabs::-webkit-scrollbar{display:none}
.mh_tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid #dde3ea;font-size:14px;color:#22262b;white-space:nowrap}
.mh_tabs button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mh_tabs button[aria-selected="true"]{background:#101C2F;border-color:#101C2F;color:#fff}
.mh_track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;scroll-padding:0 16px;overscroll-behavior-x:contain}
.mh_track::-webkit-scrollbar{display:none}
.mh_card{flex:0 0 calc(100% - 28px);max-width:560px;scroll-snap-align:start;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e1e6ec;box-shadow:0 14px 34px -22px rgba(16,28,47,.35);display:flex;flex-direction:column}
.mh_img{position:relative;aspect-ratio:4/3;background:#eef0f2}
.mh_img img{width:100%;height:100%;object-fit:cover;display:block}
.mh_num{position:absolute;left:12px;top:12px;background:rgba(16,28,47,.86);color:#fff;border-radius:6px;padding:5px 8px}
.mh_body{padding:16px 16px 18px;display:grid;gap:12px}
.mh_body h3{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#101C2F}
.mh_seg{display:flex;flex-wrap:wrap;gap:6px}
.mh_seg button{height:32px;padding:0 12px;border-radius:999px;background:#f1f4f8;font-size:13px;color:#3d4653}
.mh_seg button[aria-selected="true"]{background:var(--accent);color:#fff}
.mh_panel{display:grid;gap:10px}
.mh_tag{color:var(--atext,#0A6FA6)}
.mh_panel p{font-size:14.5px;line-height:1.55;color:#3d4653}
.mh_panel dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e6eaef;border:1px solid #e6eaef;border-radius:10px;overflow:hidden}
.mh_panel dl div{background:#fff;padding:9px 10px;min-width:0}
.mh_panel dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7a8594}
.mh_panel dd{margin:3px 0 0;font-size:13px;line-height:1.35;color:#22262b}
.mh_more{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--atext,#0A6FA6)}
.mh_more svg{width:22px;height:12px}
.mh_dots{display:flex;justify-content:center;gap:6px}
.mh_dots i{width:7px;height:7px;border-radius:50%;background:#c4ccd6;transition:all .3s}
.mh_dots i.on{width:22px;border-radius:4px;background:#101C2F}
.mh_note{text-align:center;font-size:12.5px;color:#6a7480}
@media (min-width:600px){.mh_card{flex-basis:calc(50% - 8px)}}
@media (prefers-reduced-motion:reduce){.mh_track{scroll-behavior:auto}}
.mh_panel[hidden]{display:none !important}
.mh_panel dl div:last-child:nth-child(odd){grid-column:1/-1}

/* ---------- photo plus live-data cards on phones ----------
   On a narrow screen the floating demo cards no longer fit inside the photo and were cut off.
   Below 700px the photo keeps its shape and the cards sit underneath it, overlapping its lower edge. */
@media (max-width:700px){
  .media,.rhc_media{aspect-ratio:auto !important;overflow:visible !important;background:none !important;box-shadow:none !important;border-radius:0 !important;display:flex;flex-direction:column}
  .media::after{display:none !important}
  .media img,.rhc_media > img{aspect-ratio:14/9;height:auto !important;border-radius:18px;transform:none !important;animation:none !important}
  .media .gcard,.rhc_media .gcard{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto !important;margin:-30px 12px 0 !important;opacity:1 !important;transform:none !important}
  .media .gcard ~ .gcard,.rhc_media .gcard ~ .gcard{margin-top:10px !important}
  .rh_art .gcard.c1,.rhe_art .gcard.c1{left:8px !important}
  .rh_art .gcard,.rhe_art .gcard,.rrow_v .gcard{max-width:calc(100% - 16px)}
}

/* ---------- compact dropdown menus (Platform, Solutions, Hardware, Resources) ---------- */
.dd_menu.dm2,.dd_menu.dm3{display:grid;gap:4px 28px;padding:18px 20px 16px;border-radius:0 0 12px 12px;border-top:1px solid var(--line);white-space:normal}
.dd_menu.dm2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);width:540px}
.dd_menu.dm3{grid-template-columns:repeat(3,minmax(0,1fr));width:620px}
.dm_col{display:flex;flex-direction:column;gap:1px;min-width:0}
.dm_col .mono{font-size:10.5px;margin:0 0 8px 8px}
.dd_menu .dm_plain{display:flex;align-items:center;gap:10px;padding:7px 8px;font-size:14px;color:#22262b;border-radius:7px}
.dd_menu .dm_plain:hover{background:#f3f6f9;color:var(--accent)}
.dd_menu .dm_ic svg{width:16px;height:16px;flex:none;color:#3a3f45}
.dd_menu.dm2 a:not(.dm_plain):not(.dm_more){padding:8px}
.dd_menu.dm2 a b{font-size:14px}
.dd_menu.dm2 a small{font-size:12px}
.dd_menu .dm_more{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0 8px;padding:0;font-size:13px;color:var(--atext,#0A6FA6)}
.dd_menu .dm_more svg{width:16px}
.dd_menu .dm_more:hover{background:none;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1320px){.dd_menu.dm3{width:580px}.dd_menu.dm2{width:500px}}


/* phone and tablet grids: the same breakpoints as the original rules, with shrink-safe columns,
   so a wide table or a long word never widens the page */
@media (max-width:999px){.eg_story{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.cr_grid,.dm_addr,.dm_grid,.dm_tracks,.hub_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.dm_stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ai_grid,.ar_grid,.ar_hgrid.two,.arch_l,.certs2_row.a,.certs2_row.b,.cmap_grid,.cs_body,.cs_gal,.cs_grid,.cs_sec,.cs_stack .lv,.cs_story_grid,.cs_why_grid,.cx_feats,.cx_frame,.cx_more,.cx_venn,.dcards,.dcards.n2,.dcards.n4,.dform form,.ev,.evx_grid,.ex_grid,.faq2,.feats,.fly_grid,.ft2_news,.gate_f,.gate_grid,.gl_letter,.gl_letter > div,.gl_list,.gt_grid,.idx_grid,.idx_grid.three,.mrow,.mrow.flip,.notx_r,.orow,.orow.flip,.pers_card,.phero_grid,.probs,.probs.n4,.proofs_grid,.proofs_head,.pso_row,.pstrip,.px_feats,.rcmp_box,.rel,.rh_split,.rhe_grid,.rhf > .wrap:first-of-type,.ri_row,.rl_feat,.rl_grid,.rl_list,.rl_top,.rrow,.ruses_grid,.seats,.steps,.steps.n3,.steps.n4,.stx,.team2,.team_grid,.team_grid.n3,.tln,.trust2_certs,.ways_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.cs_sgrid,.cs_sgrid.n3,.ev_people.n3,.ev_people.n4,.evfacts,.ft2_grid,.ft_top,.hw_grid,.proofs_grid,.rhf_chips,.trust2_proof,.trust_grid,.verts_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.ro_items,.ro_items.n3,.ro_items.n4,.ro_items.n5,.sm_cols,.xp{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){.sm_grid,.sm_grid.n4,.sm_grid.n8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.kst,.ty_next{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.rhf_chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.evx_grid,.proofs_grid,.rl_grid,.team2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.dm_off4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.person b{font-size:15px;overflow-wrap:anywhere}.person figcaption{padding:40px 10px 10px}}

/* 3D markers: the label side is chosen per frame by app.js (data-side) so labels never cover markers or each other */
.hs[data-side="r"] .hs_label{left:34px !important;right:auto !important;top:-15px !important;transform:none}
.hs[data-side="l"] .hs_label{left:auto !important;right:34px !important;top:-15px !important;transform:none}
.hs[data-side="u"] .hs_label{left:0 !important;right:auto !important;top:-70px !important;transform:translateX(-50%)}
.hs[data-side="d"] .hs_label{left:0 !important;right:auto !important;top:40px !important;transform:translateX(-50%)}

/* "Every site, one map" on the home page: the portfolio map graphic sits full bleed in its card */
.cx_shot.cx_map{padding:0 !important;background:#060d1a !important;border-radius:6px;overflow:hidden}
.cx_shot.cx_map img{display:block;width:100%;height:auto;border-radius:0 !important;box-shadow:none !important}

/* Zoom Scheduler on the demo page: tall enough for the calendar and time slots without inner scrolling */
.zoom_sched{display:block;height:900px}
@media (max-width:600px){.zoom_sched{height:1180px}}


/* lean product pages (site.mjs productLean) */
.pl{padding:96px 0;background:#fff}
.pl.grey{background:#f4f5f6}
.pl_head{max-width:820px;margin-bottom:40px}
.pl_head .h-sec{margin-top:14px}
.pl_lead{max-width:760px;font-size:19px;line-height:1.6;color:#3d4653;margin:-12px 0 0}
#sees{padding-bottom:20px}
.pl_stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #111}
.pl_stat{padding:28px 28px 8px 0;display:grid;gap:10px;align-content:start}
.pl_stat + .pl_stat{padding-left:28px;border-left:1px solid #e4e6e9}
.pl_stat b{font-weight:400;font-size:clamp(40px,4.2vw,60px);letter-spacing:-.03em;line-height:1;color:var(--inkc,#101C2F)}
.pl_stat p{font-size:16px;line-height:1.5;color:#3d4653}
.pl_stat small,.pl_trends small{font-size:12.5px;color:#7a8594}
.pl_stat small a,.pl_trends small a{color:var(--atext,#0A6FA6);text-decoration:underline;text-underline-offset:3px}
.pl_ba{border:1px solid #e1e7ef;border-radius:6px;overflow:hidden}
.pl_ba_h,.pl_ba_r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pl_ba_h span{padding:14px 22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a8594;background:#f6f7f9}
.pl_ba_h span:last-child{color:#fff;background:var(--inkc,#101C2F)}
.pl_ba_r p{padding:18px 22px;border-top:1px solid #eef0f3;font-size:16px;line-height:1.5;color:#6a7078}
.pl_ba_r p:last-child{color:#16191d;background:#f4f8fd}
.pl_trends{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl_trends article{background:#fff;border-radius:6px;padding:26px;display:grid;gap:10px;align-content:start;border-top:3px solid var(--accent,#0090D8)}
.pl_trends time{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--atext,#0A6FA6);letter-spacing:.06em}
.pl_trends h3{font-size:20px;font-weight:600;line-height:1.25;color:var(--inkc,#101C2F)}
.pl_trends p{font-size:15px;line-height:1.55;color:#3d4653}
.pl_poss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e4e6e9;border:1px solid #e4e6e9;border-radius:6px;overflow:hidden}
.pl_poss > div{background:#fff;padding:28px;display:grid;gap:8px;align-content:start}
.pl_poss span{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--amber,#F59C0E)}
.pl_poss h3{font-size:20px;font-weight:600;color:var(--inkc,#101C2F)}
.pl_poss p{font-size:15.5px;line-height:1.55;color:#3d4653}
@media (max-width:900px){.pl{padding:64px 0}.pl_stats,.pl_trends{grid-template-columns:minmax(0,1fr)}.pl_stat + .pl_stat{padding-left:0;border-left:0;border-top:1px solid #e4e6e9}.pl_poss{grid-template-columns:minmax(0,1fr)}.pl_ba_h span,.pl_ba_r p{padding:14px 16px;font-size:14.5px}}
.pl_poss small{font-size:12.5px;color:#7a8594}.pl_poss small a{color:var(--atext,#0A6FA6);text-decoration:underline;text-underline-offset:3px}
@media (max-width:420px){.pl_ba_h span{letter-spacing:.06em;font-size:11px;padding:12px;overflow-wrap:anywhere}}
.trust2.certs_only{padding:56px 0}.trust2.certs_only .certs2{margin-top:0}

.px_feats > .px_dep:only-child{grid-column:1/-1}