/* Embrava DeviceOS vs Microsoft MDEP. Loaded after site.css.
   Built from the /platform/deviceos components so the two pages read as a
   pair: no eyebrows, navy headings on the site scale, grey copy held to a
   measure, sections separated by their background rather than by rules.
   Every value is a site.css token unless it is genuinely this page's own
   (the container, the diagram frames, the band tints). */

/* header.nav is fixed. The hero reserves its height itself (see HERO), so its
   backdrop can run up behind the header */
body{padding-top:0}
/* below 1025px mobile-nav-unified.js makes body a flex column; let the page
   shrink to the viewport instead of growing sideways */
body > *{min-width:0}
[id]{scroll-margin-top:104px}

/* ---------- layout ---------- */
/* the live content measure: 1256px inside a 40px gutter */
.wrap{max-width:1336px;margin:0 auto;padding:0 40px}
.sec{padding:96px 0}
.sec-white{background:var(--card)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
@media(max-width:940px){.split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .sec{padding:64px 0}
}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink)}
/* headings carry their own measure, in their own ch; a container's measure is
   set in body ch and would squeeze a 46px heading into a narrow column */
main h2{max-width:26ch}
/* a question heading runs a little wider so it sets in two lines, not three */
main h2.h2-wide{max-width:34ch}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--muted)}
.sec-head .lede{margin-top:18px;max-width:66ch}
.prose p{max-width:72ch;margin-top:20px;font-size:var(--t-body-lg);line-height:1.65;color:var(--muted)}
.after{margin-top:32px;max-width:72ch;font-size:var(--t-body-lg);line-height:1.65;color:var(--muted)}
.after strong,.prose strong{color:var(--ink);font-weight:600}
.inline-link{color:var(--accent-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(49,115,186,.35)}
.inline-link:hover{text-decoration-color:currentColor}
sup{line-height:0;white-space:nowrap}
sup a{font-size:10px;font-weight:600;color:var(--accent-ink);margin-left:1px}
sup a:hover{text-decoration:underline}

/* ---------- buttons: site.css .btn, one step up for page CTAs ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-row .btn{font-size:var(--t-small)}

/* =====================================================================
   HERO -- light, navy type, one column of copy
   ===================================================================== */
/* Over the hero the header goes clear and the backdrop runs up behind it; it
   turns solid again once the hero has scrolled away (.nav-over-hero is set by
   the page script). The top padding is the 80px header plus the breathing room
   above the H1; the bottom is kept short so the next section peeks into the
   first screen. */
header.nav.nav-over-hero{border-bottom-color:transparent}
header.nav.nav-over-hero::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(#mobileMenu.open) header.nav::before{background:rgba(255,255,255,.92)}
.hero{padding:calc(80px + clamp(64px,11vh,120px)) 0 clamp(40px,6vh,56px);
  /* fades to white, the colour of the answer section it runs into */
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--card) 100%)}

.hero h1{max-width:15ch}
.hero-sub{margin-top:20px;font-size:var(--t-h3);line-height:1.35;font-weight:500;
  letter-spacing:-.01em;color:var(--muted)}
.hero-lede{margin-top:16px;max-width:var(--measure-lede);font-size:var(--t-body-lg);
  line-height:1.65;color:var(--muted)}
.byline{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:28px;font-size:var(--t-micro);color:var(--faint)}
.byline span:not(:last-child)::after{content:"·";margin:0 10px}
.byline b{color:var(--muted);font-weight:600}
/* on phones the three facts wrap mid-row and strand a dot at the line end;
   stack them instead */
@media(max-width:560px){
  .byline{flex-direction:column;gap:4px}
  .byline span:not(:last-child)::after{content:none}
}
@media(max-width:940px){
  .hero{padding-bottom:48px}
}
/* on a phone both CTAs stay in the first screen, as on /platform/deviceos */
@media(max-width:560px){
  .hero{padding:calc(80px + 40px) 0 40px}
  .hero-sub{margin-top:14px;font-size:var(--t-h4)}
  .hero-lede{margin-top:12px;font-size:var(--t-body);line-height:1.6}
  .cta-row{margin-top:22px;gap:10px}
}

/* =====================================================================
   ON THIS PAGE -- the sticky rail beside the comparison body
   The rail needs a column that runs the length of these sections, so in
   here every section sits on the page ground (no full-bleed bands for the
   rail to sit on) and the cards and the table stay white.
   ===================================================================== */
.rail-layout{display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:clamp(40px,4.5vw,72px);align-items:start}
.rail-main .wrap{max-width:none;padding:0}
/* two columns inside a narrower body only while each half has room */
@media(max-width:1280px){
  .rail-main .split{grid-template-columns:minmax(0,1fr)}
  .rail-main .split > figure{max-width:620px}
}
.rail-nav{position:sticky;top:104px;margin-top:96px;max-height:calc(100vh - 128px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cfd8e2 transparent}
.rail-label{margin-bottom:18px;font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.rail-nav a{display:block;padding:9px 0 9px 14px;border-left:1px solid var(--line);
  font-size:var(--t-small);line-height:1.4;color:var(--muted);transition:color .16s,border-color .16s}
.rail-nav a:hover{color:var(--ink)}
.rail-nav a.is-active{padding-left:13px;border-left:2px solid var(--accent);color:var(--ink);font-weight:600}
/* below 1100px there is no room for a rail beside the body: it becomes a plain
   list of jump links at the top of this stretch, before the first section */
@media(max-width:1100px){
  .rail-layout{grid-template-columns:minmax(0,1fr)}
  .rail-nav{position:static;max-height:none;overflow:visible;margin-top:56px}
  .rail-main .sec:first-child{padding-top:48px}
}

/* =====================================================================
   THE SHORT ANSWER -- the two stacks, the shared layer lit in both
   ===================================================================== */
.stacks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.2vw,28px);margin-top:clamp(32px,3.6vw,48px)}
.stack{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--sh-card)}
/* the experience-center selected frame */
.stack.is-embrava,.card.is-embrava{border:1px solid transparent;box-shadow:none;
  background:linear-gradient(180deg,rgba(65,154,248,.10),rgba(65,154,248,0) 70%) padding-box,
             linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(180deg,rgba(65,154,248,.59),rgba(65,154,248,.2)) border-box}
.stack h3{font-size:var(--t-h3)}
.stack-tag{margin-top:6px;font-size:var(--t-body);color:var(--muted)}
.stack dl{margin-top:22px;display:grid;gap:4px}
.st-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;
  padding:12px 14px;border-radius:12px;font-size:var(--t-small)}
.st-row dt{color:var(--muted)}
/* a value that cannot share the line moves down whole rather than splitting */
.st-row dd{margin-left:auto;color:var(--ink);font-weight:500;text-align:right;white-space:nowrap}
.st-row.is-layer{background:var(--accent-soft)}
.st-row.is-layer dt,.st-row.is-layer dd{color:var(--ink);font-weight:600}
@media(max-width:760px){.stacks{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   WHAT IS EMBRAVA DEVICEOS -- the Foundation page's layer diagram
   ===================================================================== */
.iso-fig{margin:0}
.iso-panel{background:linear-gradient(180deg,#F7FAFF 0%,#EAF2FE 100%);
  border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:clamp(32px,3.4vw,48px) 20px}
/* labels are HTML beside the SVG, so they keep their token sizes however far the
   stack scales down; each sits on its layer's left corner (y 155/250/345 of the
   76-444 viewBox) */
.iso-stage{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}
.iso-labels{display:grid;grid-template-rows:minmax(0,1fr)}
.iso-l{grid-area:1/1;align-self:start;position:relative;display:flex;align-items:flex-start;margin:0;
  font-size:var(--t-body-lg);line-height:1.3;transform:translateY(-.65em)}
.iso-l:nth-child(1){top:21.47%}
.iso-l:nth-child(2){top:47.28%}
.iso-l:nth-child(3){top:73.1%}
.iso-t{display:flex;flex-direction:column;gap:4px}
.iso-l .nm{font-weight:600;color:var(--ink);white-space:nowrap}
.iso-l .rl{font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;line-height:1.3;color:var(--muted);white-space:nowrap}
.iso-l .lead{flex:1;min-width:20px;margin:.65em 0 0 10px;border-top:1.5px dashed var(--faint);opacity:.6}
.iso{display:block;width:100%;height:auto}
/* phones: too narrow for labels beside the stack, so they list below it in the
   same top-to-bottom order */
@media(max-width:640px){
  .iso-panel{padding:28px 16px}
  .iso-stage{grid-template-columns:minmax(0,1fr)}
  .iso{order:-1;max-width:200px;margin:0 auto}
  .iso-labels{display:flex;flex-direction:column;gap:14px;margin-top:24px;text-align:center}
  .iso-l{top:auto !important;align-self:center;transform:none}
  .iso-t{align-items:center}
  .iso-l .lead{display:none}
}

/* =====================================================================
   COMPARISON TABLE -- one white frame, the Embrava column washed
   ===================================================================== */
.cmp{position:relative;margin-top:clamp(32px,3.6vw,48px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card)}
/* the selected column: one flat tint down the Embrava cells, so it reads as
   highlighted to the last row (a fading wash lost it at the bottom) */
.cmp::before{content:"";position:absolute;top:0;bottom:0;left:26%;width:37%;pointer-events:none;
  background:var(--accent-soft)}
.cmp table{position:relative;width:100%;border-collapse:collapse;table-layout:fixed}
.c-label{width:26%}
.c-emb,.c-ms{width:37%}
.cmp th,.cmp td{padding:18px 24px;text-align:left;vertical-align:top;
  font-size:var(--t-small);line-height:1.55}
.cmp thead th{padding-top:22px;padding-bottom:18px;font-size:var(--t-fine);font-weight:600;color:var(--ink)}
.cmp thead th:first-child{color:var(--faint);font-weight:500}
.cmp tbody tr+tr th,.cmp tbody tr+tr td,.cmp tbody tr:first-child th,.cmp tbody tr:first-child td{border-top:1px solid var(--line)}
.cmp tbody th{font-weight:600;color:var(--ink)}
.cmp td{color:var(--muted)}
.cmp td:nth-child(2){color:var(--ink)}
/* not yet confirmed: reads as a gap on purpose, not as content */
.tbc{font-style:italic;color:var(--faint)}
@media(max-width:760px){
  .cmp{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .cmp::before{display:none}
  .cmp table,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp colgroup,.cmp thead{display:none}
  .cmp tbody tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
    padding:18px 18px 6px;margin-bottom:12px}
  .cmp tbody th,.cmp tbody td,.cmp tbody tr+tr th,.cmp tbody tr+tr td,
  .cmp tbody tr:first-child th,.cmp tbody tr:first-child td{border-top:0;padding:0 0 12px}
  .cmp tbody th{font-size:var(--t-body);padding-bottom:10px}
  .cmp td::before{content:attr(data-platform);display:block;margin-bottom:3px;
    font-size:var(--t-micro);font-weight:600;color:var(--faint)}
  /* tbody tr keeps it above the first-row padding reset, which otherwise
     pulled the text of the first card's Embrava cell to the tint's edge */
  .cmp tbody tr td:nth-child(2){margin:0 -10px 10px;padding:10px 10px 12px;border-radius:12px;background:var(--accent-soft)}
}

/* =====================================================================
   PAIRS -- the decision cards and the fleet cards (DeviceOS .stat)
   ===================================================================== */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.2vw,28px);margin-top:clamp(32px,3.6vw,48px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);box-shadow:var(--sh-card)}
.card h3{font-size:var(--t-h3)}
.card p{margin-top:12px;font-size:var(--t-body);line-height:1.6;color:var(--muted)}
.checks{list-style:none;margin-top:20px;display:grid;gap:14px}
.checks li{position:relative;padding-left:30px;font-size:var(--t-body);line-height:1.6;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:3px;top:.45em;width:12px;height:6px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.card.is-embrava .checks li::before{border-color:var(--accent)}
@media(max-width:760px){.pair{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   KEY DIFFERENCES -- ownership, security, fleet and integrations as four
   cards; each keeps only what the comparison table does not already say
   ===================================================================== */
/* each card is a quick two-sided contrast: a bold label, then one line */
.kd .card p{margin-top:12px}
.kd .card strong{color:var(--ink);font-weight:600}
.kd-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--t-body);font-weight:600;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(49,115,186,.35)}
.kd-link:hover{text-decoration-color:currentColor}
/* sections in the rail area sit a little closer than the full-width ones */
.rail-main .sec{padding:56px 0}
.rail-main .sec:first-child{padding-top:88px}
.rail-main .sec:last-child{padding-bottom:88px}
@media(max-width:760px){.rail-main .sec{padding:44px 0}}
/* the integrations proof: text for Microsoft (no Microsoft logo on a page that
   names Microsoft as the comparison, per the brief), marks for Google and Zoom */
.kd-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:22px}
.kd-logos img{display:block;height:auto}
.kd-ms{font-size:var(--t-body-lg);line-height:1;letter-spacing:-.4px;color:#5E5E5E;white-space:nowrap}

/* =====================================================================
   ALONGSIDE -- the coexistence floor plan in the diagram frame
   ===================================================================== */
.floor{margin:clamp(32px,3.6vw,48px) 0 0}
.floor-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(14px,2vw,26px);overflow-x:auto}
.floor-panel svg{display:block;width:100%;min-width:620px;height:auto}
/* phones get the same plan stacked, so it never scrolls sideways */
.floor-panel .floor-sm{display:none;min-width:0}
@media(max-width:640px){
  .floor-panel{overflow:visible}
  .floor-panel .floor-lg{display:none}
  .floor-panel .floor-sm{display:block}
}

/* =====================================================================
   EVALUATION -- an open two-column list, no tiles and no rules
   ===================================================================== */
.criteria{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,6.5vw,104px);row-gap:clamp(30px,3.4vw,46px);margin-top:clamp(36px,4vw,56px)}
.criteria li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px}
.criteria .n{grid-row:span 2;font-size:var(--t-small);font-weight:500;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;padding-top:.2em}
.criteria h3{font-size:var(--t-h4);line-height:1.35}
.criteria p{margin-top:6px;font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:44ch}
@media(max-width:760px){.criteria{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   FAQ -- the /platform/deviceos FAQ: heading held left, questions in cards
   beside it, a chevron that turns over when a question opens. Each question
   opens on its own, as there. Sizes are the nearest tokens to DeviceOS's
   (19px questions, 15.5px answers).
   ===================================================================== */
.faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
  gap:clamp(36px,5vw,88px);align-items:start}
/* the heading stays put while the list runs past it */
.faq-head h2{position:sticky;top:117px}
.faq-list{--pad:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:12px}
/* closed, a white card on a hairline; open, the same card carrying the
   gradient. Both states run a 1px border, so opening one shifts nothing. */
.faq-item{padding:0 var(--pad);border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:var(--card);transition:background .25s,border-color .25s}
.faq-item.is-open{border:1px solid transparent;
  background:linear-gradient(180deg,rgba(65,154,248,.10),rgba(65,154,248,0) 70%) padding-box,
             linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(180deg,rgba(65,154,248,.59),rgba(65,154,248,.2)) border-box}
/* questions run the measure: pretty, not the global h3 balance */
.faq-item h3{font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit;text-wrap:pretty}
/* question | chevron */
.faq-q{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:0 16px;padding:24px 0 22px;text-align:left;font-size:var(--t-lede);font-weight:500;
  line-height:1.4;color:var(--ink);transition:color .15s}
.faq-q:hover{color:var(--accent-ink)}
.faq-icon{display:block;width:18px;height:18px;margin-top:.15em;color:var(--faint);
  transition:transform .35s var(--ease-out),color .15s}
.faq-icon svg{display:block;width:18px;height:18px}
.faq-q:hover .faq-icon{color:var(--accent-ink)}
.faq-item.is-open .faq-icon{transform:rotate(180deg);color:var(--ink)}
.faq-pane{display:grid;grid-template-rows:0fr;overflow:hidden;
  /* visibility, not just height: a collapsed answer is not read out */
  visibility:hidden;transition:grid-template-rows .6s var(--ease-out),visibility 0s linear .6s}
.faq-item.is-open .faq-pane{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .6s var(--ease-out),visibility 0s}
.faq-pane-mask{overflow:hidden}
.faq-pane-content{padding:0 34px 26px 0;max-width:62ch;font-size:var(--t-body);line-height:1.65;
  color:var(--muted);opacity:0;transform:translateY(1rem);
  transition:transform .8s var(--ease-out),opacity .6s}
.faq-item.is-open .faq-pane-content{opacity:1;transform:none}
@media(max-width:900px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .faq-head h2{position:static}
}
@media(max-width:560px){
  .faq-q{gap:0 12px;padding:20px 0 18px}
  .faq-pane-content{padding:0 0 22px}
}

/* =====================================================================
   RESOURCES AND REFERENCES -- deliberately low-key, closing the FAQ column:
   a row of text links, then the references folded behind one quiet line
   ===================================================================== */
.faq-main{min-width:0}
/* under the questions, in the same column, so the block belongs to the FAQ */
.refs{margin-top:56px}
.h-sm{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.28}
.res{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px}
.res a{padding-bottom:2px;border-bottom:1px solid rgba(13,46,81,.2);font-size:var(--t-fine);
  color:var(--ink);transition:border-color .2s}
.res a:hover{border-bottom-color:currentColor}
.src-list{margin:0;padding:0 0 0 20px;display:grid;gap:8px;font-size:var(--t-fine);line-height:1.5;color:var(--muted)}
.src-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(13,46,81,.25)}
.src-list a:hover{text-decoration-color:currentColor}
.src-date{color:var(--faint)}
.src-note{margin-top:12px;font-size:var(--t-micro);color:var(--faint)}
.trademark{margin-top:22px;max-width:80ch;font-size:var(--t-micro);line-height:1.6;color:var(--faint)}
@media(max-width:760px){.refs{margin-top:44px}}

/* =====================================================================
   ENDING CTA -- the site's .final-cta: centred, white, no frame
   ===================================================================== */
.final-cta{padding:96px 0 112px;text-align:center}
main .final-cta h2{margin:0 auto;max-width:20ch}
.final-cta .lede{margin:16px auto 0;max-width:52ch}
.cta-row-center{justify-content:center}
@media(max-width:760px){.final-cta{padding:64px 0 80px}}

/* =====================================================================
   STICKY CTA -- phones only, as on /platform/deviceos; solid, not frosted
   ===================================================================== */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;
  background:var(--card);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease-out)}
.stickybar.is-in{transform:none}
.stickybar>span{font-size:var(--t-fine);font-weight:600;color:var(--ink)}
/* navy with white text on phones, as on /platform/deviceos; no glow on navy */
.stickybar .btn{background:var(--ink);border-color:var(--ink);color:#fff;font-size:var(--t-fine)}
.stickybar .btn:hover{background:var(--ink);color:#fff;box-shadow:none}
@media(max-width:780px){.stickybar{display:flex}}
@media(prefers-reduced-motion:reduce){
  .stickybar,.faq-pane,.faq-pane-content,.faq-icon{transition:none}
}

/* the answer block sits close under the hero so its heading shows in the first screen */
#short-answer.sec{padding-top:clamp(48px,7vh,64px)}