/* GENERATED by tools/build-components-css.py. Do not edit by hand:
 * change the generator and rebuild. See its docstring for why each rule exists. */

:root{--nl-blue-900: #084A8C;--nl-blue-500: #328ED2;--nl-green-500: #7EC454;--nl-gray-300: #D3D3D3;--nl-gray-800: #333333;--nl-white:    #FFFFFF;--nl-black:    #000000;--brand-900: var(--nl-blue-900);--brand-700: #06407A;--brand-500: var(--nl-blue-500);--accent:       var(--nl-green-500);--accent-green: var(--nl-green-500);--bg:        #F4F8FC;--card:      var(--nl-white);--text:      var(--nl-gray-800);--muted:     #5C6773;--border:    #E2E8F0;--border-strong: var(--nl-gray-300);--font-primary:   "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-secondary: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--shadow-sm: 0 1px 2px rgba(8,74,140,.06);--shadow-md: 0 8px 22px rgba(8,74,140,.10);--shadow-lg: 0 18px 40px rgba(8,74,140,.14);--container: 1200px;--my365-monty:     url("monty.webp");--copilot-icon: url("/wp-content/plugins/my365-content-styles/assets/img/copilot-icon.webp?v=384ef866dd");--ms-partner-badge: url("/wp-content/plugins/my365-content-styles/assets/img/ms-partner-badge.webp?v=cb5659dbf7");--baseline-icon: url("/wp-content/plugins/my365-content-styles/assets/img/baseline-icon.webp?v=09a87e6862");--svc-entra: url("/wp-content/plugins/my365-content-styles/assets/img/svc-entra.webp?v=1dd3de75cd");--svc-file-services: url("/wp-content/plugins/my365-content-styles/assets/img/svc-file-services.webp?v=1d4dc4a533");--svc-exchange: url("/wp-content/plugins/my365-content-styles/assets/img/svc-exchange.webp?v=b4d4b51dd4");--svc-edge: url("/wp-content/plugins/my365-content-styles/assets/img/svc-edge.webp?v=e5a4c8d126");--svc-info-protection: url("/wp-content/plugins/my365-content-styles/assets/img/svc-info-protection.webp?v=02ae22901b");--svc-intune: url("/wp-content/plugins/my365-content-styles/assets/img/svc-intune.webp?v=1ca57dfacc");--svc-intune-autopilot: url("/wp-content/plugins/my365-content-styles/assets/img/svc-intune-autopilot.webp?v=7f960808ea");--svc-power-platform: url("/wp-content/plugins/my365-content-styles/assets/img/svc-power-platform.webp?v=b81c04ccad");--svc-defender: url("/wp-content/plugins/my365-content-styles/assets/img/svc-defender.webp?v=6f7dc265fb")}
.my365-page .site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s ease;
}
.my365-page .site-header.scrolled{ box-shadow: 0 6px 18px rgba(8,74,140,.08); }
.my365-page .nav{ display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.my365-page .brand .brand-logo-long{
  width: 168px; height: 44px;
  background: var(--nl-logo-long) center left/contain no-repeat;
  flex-shrink: 0;
}
.my365-page .nav ul{
  display: flex; gap: 2px; list-style: none; padding: 0; margin: 0 auto;
  flex-wrap: wrap;
}
.my365-page .nav a.nav-link{
  display: inline-block; padding: 8px 12px;
  color: var(--nl-gray-800); font-weight: 500; font-size: .92rem;
  border-radius: 6px;
}
.my365-page .nav a.nav-link:hover, .my365-page .nav a.nav-link:focus-visible{
  color: var(--brand-900); background: rgba(50,142,210,.08); outline: none;
}
.my365-page .btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: .94rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.my365-page .btn:active{ transform: translateY(1px); }
.my365-page .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--accent); }
.my365-page .btn-primary{
  background: var(--brand-900); color: #fff;
  box-shadow: var(--shadow-sm);
}
.my365-page .btn-primary:hover{ background: var(--brand-700); color: #fff; text-decoration: none; }
.my365-page .hero-monty{
  display: flex; justify-content: center; align-items: center;
  position: relative;
}
.my365-page .hero-monty .monty-img{
  width: clamp(200px, 32vw, 360px);
  aspect-ratio: 1 / 0.93;
  filter: drop-shadow(0 14px 28px rgba(8,74,140,.18));
}
.my365-page .hero-monty img.monty-img{
  display: block;
  height: auto;
  object-fit: contain;
}
.my365-page .hero-monty div.monty-img{
  background: var(--my365-monty) center/contain no-repeat;
}
.my365-page .hero-monty .monty-bubble{
  position: absolute;
  background: #fff;
  border: 2px solid var(--brand-900);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 700;
  color: var(--brand-900);
  font-size: .9rem;
  box-shadow: 0 6px 16px rgba(8,74,140,.16);
  white-space: nowrap;
  top: 14px; left: 14px;
}
.my365-page .hero-monty .monty-bubble::after{
  content: ""; position: absolute;
  bottom: -10px; left: 22px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--brand-900);
}
.my365-page .hero-monty .monty-bubble::before{
  content: ""; position: absolute;
  bottom: -7px; left: 24px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
  z-index: 1;
}
@media (max-width: 880px){
.my365-page .hero-monty{ order: 2; margin-top: 10px; }
}
.my365-page .calculator-v2{
  margin-top: 28px;
  background: rgba(8,74,140,.04);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-900);
  border-radius: var(--radius-md);
  padding: 22px;
}
.my365-page .calculator-v2 .calc-header{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.my365-page .calc-step-hint{
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}
.my365-page .tier-step{
  display: inline-block;
  background: var(--brand-900);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: max(12px, .68rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px 2px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.my365-page .tier-picker, .my365-page .calc-step-2{
  border: none;
  padding: 0;
  margin: 0 0 22px;
}
.my365-page .tier-picker legend, .my365-page .calc-step-2 legend{
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--brand-900);
  font-size: 1.05rem;
  margin-bottom: 6px;
  padding: 0;
}
.my365-page .tier-picker-help{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.my365-page .tier-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch; 
  padding-top: 14px;    
}
@media (max-width: 880px){
.my365-page .tier-grid{ grid-template-columns: 1fr; }
}
.my365-page .tier-radio{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.my365-page .tier-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px 18px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  user-select: none;
  height: 100%;          
  box-sizing: border-box;
}
.my365-page .tier-card::before{
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
  z-index: 2;
}
.my365-page .tier-card:hover{
  border-color: var(--brand-500);
  box-shadow: 0 6px 16px rgba(8, 74, 140, 0.10);
}
.my365-page .tier-radio:focus-visible + .tier-card{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.my365-page .tier-radio:checked + .tier-card{
  border-color: var(--brand-900);
  box-shadow: 0 8px 24px rgba(8, 74, 140, 0.16);
  background: linear-gradient(180deg, #fff 0%, #F4F8FC 100%);
}
.my365-page .tier-radio:checked + .tier-card::before{
  border-color: var(--brand-900);
  background: var(--brand-900);
  box-shadow: inset 0 0 0 4px #fff;
}
.my365-page .tier-card .tc-badge{
  position: absolute;
  top: -12px;
  left: 14px;
  background: var(--accent-green);
  color: #1F4010;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: max(12px, .72rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 3;
}
.my365-page .tier-card .tc-name{
  font-family: var(--font-secondary);
  font-weight: 800;
  color: var(--brand-900);
  font-size: 1.1rem;
  padding-right: 32px;   
  line-height: 1.2;
}
.my365-page .tier-card .tc-term{
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  min-height: 1.1em;  
}
.my365-page .tier-card .tc-price{
  font-family: var(--font-primary);
  font-weight: 900;
  color: var(--brand-900);
  font-size: 1.75rem;
  line-height: 1;
  margin: 6px 0 10px;
  display: block;
}
.my365-page .tier-card .tc-price small{
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.my365-page .tier-card .tc-meta{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.my365-page .tier-card .tc-meta li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 52px;  
  padding: 4px 0;
  border-bottom: 1px dashed rgba(8, 74, 140, 0.10);
  box-sizing: border-box;
}
.my365-page .tier-card .tc-meta li:last-child{ border-bottom: none; }
.my365-page .tier-card .tc-meta strong{
  color: var(--brand-900);
  font-weight: 800;
}
.my365-page .tier-card .tc-meta-internal{
  color: #6D4C00;
}
.my365-page .tier-card .tc-meta-internal small{
  color: #6D4C00;
  font-size: .78rem;
  font-style: italic;
  font-weight: 500;
  margin-top: 1px;
}
.my365-page .tier-card .tc-savings{
  display: block;
  color: #2F5418;
  font-size: .76rem;
  font-weight: 700;
  font-style: italic;
  margin-top: 1px;
}
.my365-page .tier-card .tc-flex{
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(8, 74, 140, 0.08);
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
.my365-page .tier-card .tc-flex-best{
  color: #2F5418;
  font-weight: 700;
  font-style: normal;
  border-top-color: rgba(126, 196, 84, 0.35);
}
.my365-page .tier-card.tier-card-best{
  border-color: var(--accent-green);
}
.my365-page .tier-card.tier-card-best::before{
  border-color: var(--accent-green);
}
.my365-page .tier-radio:checked + .tier-card.tier-card-best{
  border-color: var(--accent-green);
  border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, #F2FBE9 100%);
  box-shadow: 0 8px 24px rgba(126, 196, 84, 0.25);
}
.my365-page .tier-radio:checked + .tier-card.tier-card-best::before{
  border-color: var(--accent-green);
  background: var(--accent-green);
}
.my365-page .calc-step-3-header{
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--brand-900);
  font-size: 1.05rem;
  margin: 0 0 12px;
}
.my365-page .calc-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-primary); font-weight: 800;
  color: var(--brand-900); font-size: .85rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.my365-page .calc-eyebrow::before{
  content: ""; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
}
.my365-page .calc-inputs{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 600px){
.my365-page .calc-inputs{ grid-template-columns: 1fr; }
}
.my365-page .calc-inputs label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--brand-900);
  font-size: .88rem;
  min-height: 100%; 
}
.my365-page .calc-input-title{
  display: block;
  line-height: 1.3;
  
}
.my365-page .calc-inputs input[type="number"], .my365-page .calc-inputs select{
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px; background: #fff;
  color: var(--text); font-weight: 600;
  width: 100%;
  box-sizing: border-box;
}
.my365-page .calc-inputs input:focus-visible, .my365-page .calc-inputs select:focus-visible{
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(50,142,210,.25);
}
.my365-page .calc-inputs input:disabled{
  background: #F4F8FC;
  color: var(--muted);
  cursor: not-allowed;
}
.my365-page .calc-inputs label.calc-input-disabled{
  opacity: .55;
}
.my365-page .calc-inputs label.calc-input-disabled .field-hint::after{
  content: " — not used on Learn";
  font-style: italic;
  color: #6D4C00;
}
.my365-page .field-hint{
  font-family: var(--font-primary);
  font-weight: 400; font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
  flex: 1 1 auto;
  display: block;
}
.my365-page .calc-output-v2{
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.my365-page .calc-breakdown{
  list-style: none; padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.my365-page .calc-breakdown li{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .94rem; gap: 16px;
  min-height: 24px;
}
.my365-page .calc-breakdown li:last-child{ border-bottom: none; }
.my365-page .calc-breakdown li:last-of-type{ border-bottom: 0; }
.my365-page .calc-breakdown .cb-label{
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}
.my365-page .calc-breakdown .cb-amount{
  font-family: var(--font-primary); font-weight: 700;
  color: var(--brand-900); white-space: nowrap;
  flex: 0 0 auto;
  text-align: right;
}
.my365-page .calc-breakdown li.cb-key{
  background: linear-gradient(180deg, #ECF6FE 0%, #DBEEFC 100%);
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 8px 0;
  min-height: 44px;
}
.my365-page .calc-breakdown li.cb-key .cb-label{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: var(--brand-900);
  font-weight: 700;
}
.my365-page .calc-breakdown li.cb-key .cb-key-eyebrow{
  display: inline-block;
  background: var(--brand-900);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: max(12px, .65rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px 2px;
  border-radius: 999px;
}
.my365-page .calc-breakdown li.cb-key .cb-amount{
  font-size: 1.45rem;
  color: var(--brand-900);
  font-weight: 900;
}
.print-estimate .pe-key-row td{
  background: #ECF6FE;
  border: 1.5px solid var(--brand-500);
  font-weight: 700;
}
.print-estimate .pe-key-row td.pe-amount{
  color: var(--brand-900);
  font-size: 1.15rem;
  font-weight: 900;
}
.my365-page .cb-total{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; margin-top: 10px;
  border-top: 2px solid var(--brand-900);
  font-size: 1rem; gap: 12px;
}
.my365-page .proj-margin-block{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(8, 74, 140, 0.18);
}
.my365-page .pmb-title{
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2F5418;
}
.my365-page .calc-breakdown-projects li.cost-row strong, .my365-page .calc-breakdown-projects [data-out="projCost"]{ color: #B33A30; }
.my365-page .cb-subtotal{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #DEEFD0 0%, #C8E4B0 100%);
  border-radius: var(--radius-sm);
}
.my365-page .cb-subtotal span{
  font-family: var(--font-primary);
  font-weight: 800;
  color: #2F5418;
  font-size: .92rem;
}
.my365-page .cb-subtotal strong{
  font-family: var(--font-primary);
  font-weight: 900;
  color: #1F4010;
  font-size: 1.4rem;
}
.my365-page .optional-tag{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
}
.my365-page .cb-total > span{ font-family: var(--font-primary); font-weight: 700; color: var(--brand-900); }
.my365-page .cb-total strong{
  font-family: var(--font-primary); font-weight: 800;
  font-size: 1.5rem; color: var(--brand-900); white-space: nowrap;
}
.my365-page .calc-note{
  margin: 14px 0 0;
  font-size: .85rem; color: var(--muted);
}
.my365-page .cb-sub{
  font-size: .82em;
  color: var(--muted);
  font-weight: 500;
}
.my365-page .cb-link{
  color: var(--brand-700);
  text-decoration: underline dotted;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 3px;
}
.my365-page .cb-link:hover, .my365-page .cb-link:focus{
  color: var(--brand-900);
  text-decoration-style: solid;
}
.my365-page .baseline-header{
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 28px;
}
@media (max-width: 720px){
.my365-page .baseline-header{ flex-direction: column; gap: 16px; }
}
.my365-page .baseline-icon{
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  background: var(--baseline-icon) center/contain no-repeat;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(8, 74, 140, 0.12);
}
.my365-page .baseline-header-text{
  flex: 1 1 auto;
  min-width: 0;
}
.my365-page .baseline-header-text .section-eyebrow{
  margin-bottom: 4px;
  display: block;
}
.my365-page .baseline-header-text h2{
  margin: 4px 0 8px;
}
.my365-page .bl-stat-sub{
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
  line-height: 1.4;
}
.my365-page .bl-tier-tag{
  align-self: flex-start;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: max(12px, .72rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--brand-900);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.my365-page .bl-tier-tag-best{
  background: var(--accent-green);
  color: #1F4010;
}
.my365-page .bl-rcta-icon{
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my365-page .app-card-icon{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}
.my365-page .scope-service-icon{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff center/contain no-repeat;
  border: 1px solid #E4ECF4;
  box-shadow: 0 2px 6px rgba(8, 74, 140, 0.08);
  background-size: 78%;
}
.my365-page .scope-service-icon.svc-entra{ background-image: var(--svc-entra); }
.my365-page .scope-service-icon.svc-file-services{ background-image: var(--svc-file-services); }
.my365-page .scope-service-icon.svc-exchange{ background-image: var(--svc-exchange); }
.my365-page .scope-service-icon.svc-edge{ background-image: var(--svc-edge); }
.my365-page .scope-service-icon.svc-info-protection{ background-image: var(--svc-info-protection); }
.my365-page .scope-service-icon.svc-intune{ background-image: var(--svc-intune); }
.my365-page .scope-service-icon.svc-intune-autopilot{ background-image: var(--svc-intune-autopilot); }
.my365-page .scope-service-icon.svc-power-platform{ background-image: var(--svc-power-platform); }
.my365-page .scope-service-icon.svc-defender{ background-image: var(--svc-defender); }
.my365-page .scope-service-icon.svc-copilot{ background-image: var(--copilot-icon); }
.my365-page .markup-table-wrap{
  background: #fff;
  border: 1px solid #DDE7F2;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(8, 74, 140, 0.05);
}
.my365-page .markup-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.my365-page .markup-table thead th{
  background: var(--brand-900);
  color: #fff;
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.my365-page .markup-table tbody td{
  padding: 16px;
  border-top: 1px solid #E4ECF4;
  vertical-align: top;
  line-height: 1.45;
}
.my365-page .markup-table tbody td small{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
}
.my365-page .markup-table tbody td strong{ color: var(--brand-900); }
.my365-page .markup-table .mt-x{
  color: #B33A30;
  font-weight: 700;
}
.my365-page .markup-table .mt-check{
  color: #2F5418;
  font-weight: 700;
}
@media (max-width: 760px){
.my365-page .markup-table{ font-size: .92rem; }
.my365-page .markup-table thead{
    
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
.my365-page .markup-table tbody, .my365-page .markup-table tr, .my365-page .markup-table td{ display: block; width: 100%; }
.my365-page .markup-table tr{
    border-top: 6px solid #DDE7F2;
    padding: 0 0 12px;
  }
.my365-page .markup-table tbody tr:first-child{ border-top: none; }
.my365-page .markup-table td{
    border: none;
    padding: 10px 16px 4px;
  }
.my365-page .markup-table td[data-label]::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-700);
  }
.my365-page .markup-table td:first-child{
    background: var(--brand-900);
    color: #fff;
    padding: 12px 16px;
    margin-bottom: 4px;
  }
.my365-page .markup-table td:first-child strong{ color: #fff; font-size: 1rem; }
.my365-page .markup-table tbody td small{ margin-top: 2px; }
}
.my365-page .markup-tip{
  margin: 14px 0 0;
  background: #FEF8E5;
  border: 1px solid #F4D77A;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .92rem;
  color: #4A3500;
  line-height: 1.5;
}
.my365-page .markup-tip strong{ color: #6D4C00; }
.my365-page .proj-card{
  background: #fff;
  border: 1px solid #DDE7F2;
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(8, 74, 140, 0.05);
  position: relative;
}
.my365-page .proj-card-best{
  border-color: var(--accent-green);
  border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, #F7FCEF 100%);
}
.my365-page .proj-card-best::after{
  content: "";
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  border-radius: var(--radius-md);
  border: 2px solid var(--accent-green);
  pointer-events: none;
  opacity: .35;
}
.my365-page .proj-tag{
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-900);
  background: #ECF3FB;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.my365-page .proj-card-best .proj-tag{
  background: #DEEFD0;
  color: #2F5418;
}
.my365-page .proj-rows{
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.my365-page .proj-rows li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(8, 74, 140, 0.10);
  font-size: .94rem;
}
.my365-page .proj-rows li:last-child{ border-bottom: none; }
.my365-page .proj-rows li span{ color: var(--muted); }
.my365-page .proj-rows li strong{ color: var(--brand-900); font-weight: 700; }
.my365-page .proj-rows li.cost-row strong{
  color: #B33A30;
}
.my365-page .proj-profit{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #DEEFD0 0%, #C8E4B0 100%);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 6px;
}
.my365-page .proj-profit span{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2F5418;
}
.my365-page .proj-profit strong{
  font-family: var(--font-primary);
  font-weight: 900;
  color: #1F4010;
  font-size: 1.55rem;
}
.my365-page .proj-card-best .proj-profit{
  background: linear-gradient(180deg, #C2E6A6 0%, #A8D982 100%);
}
.my365-page .proj-note{
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  margin: 4px 0 6px;
}
.my365-page .btn.btn-email{
  display: inline-flex;
  align-items: center;
  background: var(--accent-green);
  color: #1F4010;
  border: 2px solid var(--accent-green);
  font-weight: 800;
  word-break: break-word;
}
.my365-page .btn.btn-email:hover, .my365-page .btn.btn-email:focus-visible{
  background: #69B33F;
  border-color: #69B33F;
  color: #1F4010;
}
@media (max-width: 480px){
.my365-page .btn.btn-email{ font-size: .82rem; }
}
.my365-page .btn.btn-tertiary-cta{
  display: inline-flex;
  align-items: center;
  background: var(--brand-500);
  color: #fff;
  border: 2px solid var(--brand-500);
  font-weight: 800;
}
.my365-page .btn.btn-tertiary-cta:hover, .my365-page .btn.btn-tertiary-cta:focus-visible{
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.my365-page abbr.term{
  text-decoration: underline dotted var(--brand-500);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  font-style: normal;
  font-weight: inherit;
  -webkit-tap-highlight-color: transparent;
}
.my365-page .what-incl-item .check-icon{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(126,196,84,.20);
  display: inline-flex; align-items: center; justify-content: center;
  color: #2F5A1E;
}
.my365-page .copilot-icon{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--copilot-icon) center/contain no-repeat, #fff;
  border: 1px solid #E4ECF4;
  box-shadow: 0 1px 3px rgba(8, 74, 140, 0.06);
}
.my365-page .copilot-mark{
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
  margin-right: .35em;
  background: var(--copilot-icon) center/contain no-repeat;
  border-radius: 4px;
  flex-shrink: 0;
}
.my365-page .copilot-icon-lg{
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--copilot-icon) center/contain no-repeat, #fff;
  border: 1px solid #E4ECF4;
  box-shadow: 0 2px 6px rgba(8, 74, 140, 0.08);
}
.my365-page .monty-icon{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--my365-monty) center/contain no-repeat, #fff;
  border: 1px solid #E4ECF4;
  box-shadow: 0 1px 3px rgba(8, 74, 140, 0.06);
}
.my365-page .monty-mark{
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.4em;
  margin-right: .3em;
  background: var(--my365-monty) center/contain no-repeat;
  border-radius: 5px;
  flex-shrink: 0;
}
.my365-page .panel-credential{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(8, 74, 140, 0.12);
}
.my365-page .panel-credential-text{
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}
.my365-page .panel-credential-text strong{
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--brand-900);
  font-size: .88rem;
  display: block;
}
.my365-page .ms-partner-badge{
  display: inline-block;
  width: 220px;
  height: 116px;
  background: var(--ms-partner-badge) center/contain no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
}
.my365-page .ms-partner-badge-sm{
  width: 150px;
  height: 79px;
}
.my365-page .cognito-embed{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.back-to-top{
  display: none;
  position: fixed; right: 20px; bottom: 76px;
  z-index: 59;
  width: 40px; height: 40px;
  background: #fff; color: var(--brand-900);
  border: 2px solid var(--brand-900);
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(8,74,140,.18);
  transition: background .15s ease, color .15s ease;
}
.back-to-top.visible{ display: inline-flex; }
.back-to-top:hover{ background: var(--brand-900); color: #fff; }
.back-to-top:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--accent), 0 4px 14px rgba(8,74,140,.18); }
@media (max-width: 768px){
.back-to-top{ bottom: 70px; right: 16px; }
}
.my365-page .nav a.nav-link[aria-current="true"]{
  color: var(--brand-900);
  background: rgba(50,142,210,.10);
  box-shadow: inset 0 -2px 0 var(--brand-900);
}
.my365-page .site-header, .my365-page .tier-card, .my365-page .calculator-v2, .my365-page .proj-card, .my365-page .calc-output-v2{
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.print-estimate{ display: none; }
@media print{
body.my365-has-estimate > *:not(.print-estimate){ display: none !important; }
.print-estimate{ display: block !important; }
.print-estimate *{ box-shadow: none !important; }
}
.print-estimate{
  font-family: Arial, Helvetica, sans-serif; color: #333; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-estimate .pe-header{
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #084A8C;
  padding-bottom: 10px; margin-bottom: 14px; gap: 24px;
  break-after: avoid-page; page-break-after: avoid;
}
.print-estimate .pe-brand{
  display: flex; align-items: center; gap: 16px;
  flex: 1 1 auto; min-width: 0;
}
.print-estimate .pe-logo{
  width: auto; max-width: 200px; height: 48px; flex-shrink: 0; display: block;
}
.print-estimate .pe-brand h1, .print-estimate .pe-brand .pe-doc-title{
  font-size: 16pt; margin: 0;
  color: #084A8C; letter-spacing: -.01em;
  font-weight: 800;
  border-left: 2px solid #c8d4e2;
  padding-left: 16px;
  line-height: 1.15;
}
.print-estimate .pe-meta{
  text-align: right; font-size: 9.5pt; flex-shrink: 0;
}
.print-estimate .pe-meta > div{ margin: 1px 0; }
.print-estimate .pe-meta strong{ color: #084A8C; }
.print-estimate h2, .print-estimate .pe-h{
  font-size: 11.5pt; color: #084A8C;
  margin: 12px 0 5px; padding-bottom: 3px;
  border-bottom: 1px solid #ccc; font-weight: bold;
  break-after: avoid-page; page-break-after: avoid;
}
.print-estimate table{
  width: 100%; border-collapse: collapse;
  font-size: 9.5pt; margin: 0;
}
.print-estimate table th, .print-estimate table td{
  text-align: left; padding: 4px 8px;
  border-bottom: 1px solid #eee; vertical-align: top;
}
.print-estimate .pe-config table th{
  font-weight: 700; width: 38%; color: #084A8C;
}
.print-estimate .pe-amount{
  text-align: right; font-weight: 600; white-space: nowrap; width: 28%;
}
.print-estimate tr.pe-total td{
  border-top: 2px solid #084A8C; border-bottom: none;
  padding-top: 8px; font-weight: 700;
  font-size: 11pt; color: #084A8C;
}
.print-estimate tr.pe-annual td{
  font-weight: 600; color: #555;
  font-size: 9.5pt; border-bottom: none;
}
.print-estimate .pe-included ul{
  list-style: disc; padding-left: 18px; margin: 0; font-size: 9pt; line-height: 1.4;
}
.print-estimate .pe-included li{ padding: 1px 0; }
.print-estimate .pe-included li strong{ color: #084A8C; }
.print-estimate .pe-notes{
  margin: 12px 0 0; padding: 7px 11px;
  background: #f5f8fb; border-left: 3px solid #328ED2;
  font-size: 9pt; color: #555;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-notes strong{ color: #084A8C; }
.print-estimate .pe-footer{
  margin-top: 12px; padding-top: 8px;
  border-top: 2px solid #084A8C;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; font-size: 8.5pt; color: #555;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-footer strong{ color: #084A8C; font-size: 9.5pt; }
.print-estimate .pe-tagline{
  font-style: italic; color: #328ED2;
  font-size: 10pt; font-weight: 600;
}
.print-estimate .pe-page{
  
  position: relative;
}
.print-estimate .pe-page-break{
  page-break-before: always;
  break-before: page;
}
.print-estimate .pe-running-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #084A8C;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 9pt;
  break-after: avoid-page; page-break-after: avoid;
}
.print-estimate .pe-running-brand{
  color: #084A8C;
  font-weight: 800;
  letter-spacing: .02em;
}
.print-estimate .pe-running-section{
  color: #5C6773;
  font-style: italic;
}
.print-estimate .pe-page-title{
  font-size: 17pt;
  color: #084A8C;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.01em;
  break-after: avoid-page; page-break-after: avoid;
}
.print-estimate .pe-lead{
  font-size: 10pt;
  line-height: 1.45;
  color: #333;
  margin: 0 0 8px;
}
.print-estimate .pe-bullets{
  list-style: disc;
  padding-left: 20px;
  margin: 2px 0 8px;
  font-size: 9.5pt;
  line-height: 1.4;
}
.print-estimate .pe-bullets li{ padding: 1px 0; }
.print-estimate .pe-bullets li strong{ color: #084A8C; }
.print-estimate .pe-bullets-tight li{ padding: 0; }
.print-estimate .pe-callout{
  margin: 8px 0;
  padding: 8px 12px;
  background: #FEF8E5;
  border-left: 3px solid #E5B800;
  font-size: 9pt;
  line-height: 1.4;
  color: #4A3500;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-callout strong{ color: #6D4C00; }
.print-estimate .pe-callout-blue{
  background: #ECF6FE;
  border-left-color: #084A8C;
  color: #1A2C42;
}
.print-estimate .pe-callout-blue strong{ color: #084A8C; }
.print-estimate .pe-included-note{
  margin: 6px 0 0;
  font-size: 9pt;
  color: #5C6773;
}
.print-estimate .pe-stats-table{
  margin: 6px 0 10px;
  border-collapse: collapse;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-stats-table td{
  width: 50%;
  background: #F4F8FC;
  border: 1px solid #DDE7F2;
  padding: 9px 12px;
  font-size: 9.5pt;
  color: #084A8C;
  font-weight: 600;
  vertical-align: middle;
}
.print-estimate .pe-stat-num{
  display: inline-block;
  font-size: 16pt;
  font-weight: 900;
  color: #084A8C;
  line-height: 1;
  margin-right: 8px;
  vertical-align: -2px;
}
.print-estimate .pe-table-bordered{
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px;
  font-size: 9pt;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-table-bordered th, .print-estimate .pe-table-bordered td{
  border: 1px solid #c8d4e2;
  padding: 5px 8px;
  vertical-align: top;
  text-align: left;
}
.print-estimate .pe-table-bordered thead th{
  background: #084A8C;
  color: #fff;
  font-weight: 700;
  font-size: 9pt;
}
.print-estimate .pe-table-bordered tbody tr:nth-child(even){
  background: #F4F8FC;
}
.print-estimate .pe-table-bordered .pe-row-emph td{
  background: #DEEFD0;
  color: #1F4010;
  font-weight: 700;
}
.print-estimate .pe-next-steps{
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 0;
  margin: 6px 0 10px;
  font-size: 9pt;
  line-height: 1.4;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-next-steps td{
  width: 50%;
  padding: 10px 12px;
  border: 1px solid #c8d4e2;
  vertical-align: top;
}
.print-estimate .pe-next-step-primary{
  background: #ECF6FE;
  border-left: 3px solid #084A8C !important;
}
.print-estimate .pe-next-step-primary strong:first-child{
  color: #084A8C;
  font-size: 11pt;
  display: block;
  margin-bottom: 6px;
}
.print-estimate .pe-next-step-secondary{
  background: #F4FBE9;
  border-left: 3px solid #7EC454 !important;
}
.print-estimate .pe-next-step-secondary strong:first-child{
  color: #2F5418;
  font-size: 11pt;
  display: block;
  margin-bottom: 6px;
}
.print-estimate .pe-next-step-tertiary{
  background: #FEF8E5;
  border-left: 3px solid #E5B800 !important;
}
.print-estimate .pe-next-step-tertiary strong:first-child{
  color: #6D4C00;
  font-size: 11pt;
  display: block;
  margin-bottom: 6px;
}
.print-estimate .pe-final-footer{
  margin-top: 12px;
  padding: 10px 12px;
  background: #F4F8FC;
  border-top: 2px solid #084A8C;
  font-size: 8.5pt;
  line-height: 1.35;
  color: #5C6773;
  break-inside: avoid; page-break-inside: avoid;
}
.print-estimate .pe-final-footer strong{
  color: #084A8C;
  font-size: 10pt;
}
.my365-page .nav ul li.nav-cta-item{ display: none; }
@media (max-width: 980px){
.my365-page .nav ul{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    margin: 0; padding: 8px 14px 14px;
  }
.my365-page .nav ul.open{ display: flex; }
.my365-page .nav a.nav-link{ padding: 12px 8px; border-bottom: 1px solid rgba(8,74,140,.06); border-radius: 0; }
.my365-page .nav-cta .btn-primary{ display: none; }
.my365-page .nav ul li.nav-cta-item{ display: list-item; }
.my365-page .nav ul li.nav-cta-item-divider{
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(8,74,140,.10);
    list-style: none;
  }
.my365-page .nav ul li.nav-cta-item a{
    display: flex; align-items: center; gap: 10px;
    padding: 12px 8px;
    color: var(--brand-900); font-weight: 700;
    text-decoration: none; border-radius: 0;
    border-bottom: 1px solid rgba(8,74,140,.06);
  }
.my365-page .nav ul li.nav-cta-item-primary a{
    color: var(--brand-700);
  }
.my365-page .nav ul li.nav-cta-item a:hover, .my365-page .nav ul li.nav-cta-item a:focus-visible{
    background: rgba(8,74,140,.06);
    outline: none;
  }
.my365-page .nav ul li.nav-cta-item svg{ flex-shrink: 0; }
}
@media (max-width: 540px){
.my365-page .hero-ctas .btn{ width: 100%; }
}
.my365-page .nav-link{
  touch-action: manipulation;
}
@media (pointer: coarse) and (max-width: 980px){
.my365-page .nav-link, .back-to-top{
    min-height: 44px;
  }
.back-to-top{ min-width: 44px; }
}
@media (max-width: 768px){
.my365-page .calc-inputs input[type="number"], .my365-page .calc-inputs select{
    font-size: 16px; min-height: 44px;
  }
}
@media print{
body.presentation-mode .print-estimate{ display: block !important; }
}
.my365-page .markup-table tbody tr.mt-best td{ background:#DEEFD0; color:#1F4010; }
.my365-page .markup-table tbody tr.mt-best td strong{ color:#1F4010; }
.my365-page h1.section-h1{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -.005em;
}
.my365-page .baseline-header-text h1.section-h1{ margin: 4px 0 8px; }
.my365-page .art-filter{ margin: 0 0 18px; }
.my365-page .art-search{
  display: flex; gap: 8px; align-items: stretch;
  max-width: 640px;
}
.my365-page .art-search input[type="search"]{
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px;
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.my365-page .art-search input[type="search"]:focus-visible{
  outline: 3px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500);
}
.my365-page .art-search__go{ flex: 0 0 auto; white-space: nowrap; }
.my365-page .art-topics{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 26px;
}
.my365-page .art-chip__n{ font-size: .78rem; opacity: .7; font-weight: 400; }
.my365-page .art-chip.is-on .art-chip__n{ opacity: .85; }
.my365-page .art-count{ margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.my365-page .art-empty{ padding: 28px 0; color: var(--muted); }
.my365-page .art-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.my365-page .art-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.my365-page .art-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--brand-700);
}
.my365-page .art-card:focus-within{ outline: 3px solid var(--brand-500); outline-offset: 2px; }
.my365-page .art-card__media{
  aspect-ratio: 16 / 9; background: #E8F1FA; overflow: hidden;
}
.my365-page .art-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.my365-page .art-card__media--empty{
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
}
.my365-page .art-card__body{ padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.my365-page .art-card__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-primary);
  font-size: .76rem; color: var(--muted);
}
.my365-page .art-card__cat{
  padding: 2px 9px; border-radius: 999px;
  background: rgba(50,142,210,.12); color: var(--brand-700);
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.my365-page .art-card__title{ margin: 0; font-size: 1.12rem; line-height: 1.35; color: var(--brand-900); }
.my365-page .art-card__title a{ color: inherit; text-decoration: none; }
.my365-page .art-card__title a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.my365-page .art-card__excerpt{ margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.my365-page .art-pager{
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 34px;
}
.my365-page .art-pager__btn{
  padding: 9px 18px;
  font-family: var(--font-primary); font-weight: 700; font-size: .9rem;
  color: var(--brand-700); background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  text-decoration: none;
}
.my365-page .art-pager__btn:hover{ border-color: var(--brand-500); color: var(--brand-500); }
.my365-page .art-pager__at{ color: var(--muted); font-size: .88rem; }
@media (prefers-reduced-motion: reduce){
.my365-page .art-card{ transition: none; }
.my365-page .art-card:hover{ transform: none; }
}
@media (max-width: 640px){
.my365-page .art-grid{ grid-template-columns: 1fr; gap: 16px; }
.my365-page .art-search{ flex-direction: column; }
.my365-page .art-search__go{ width: 100%; }
}
.my365-page .sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.my365-page .site-footer a:not(.brand):not(.btn){ color: #C7DCF1; }
.my365-page .site-footer a:not(.brand):not(.btn):hover{ color: #FFFFFF; }
.my365-page .tier-card .tc-badge{ color: #1F4010; }
:root{--copilot-studio-icon: url("/wp-content/plugins/my365-content-styles/assets/img/copilot-studio-icon.webp?v=e28b0192e0");--copilot-agent-icon: url("/wp-content/plugins/my365-content-styles/assets/img/copilot-agent-icon.webp?v=fac67c9b96")}
.my365-page .scope-service-icon.svc-copilot{ background-image: var(--copilot-studio-icon); }
.my365-page .copilot-icon{ background: var(--copilot-agent-icon) center/contain no-repeat, #fff; }
:root{--copilot-product-icon: url("/wp-content/plugins/my365-content-styles/assets/img/copilot-product-icon.webp?v=59eefecc6d")}
.my365-page .app-card-icon.app-icon-copilot{
  background: var(--copilot-product-icon) center/contain no-repeat;
}
.my365-page .copilot-mark{
  background: var(--copilot-product-icon) center/contain no-repeat;
}
.my365-page .copilot-icon-lg{
  background: var(--copilot-studio-icon) center/contain no-repeat, #fff;
}
:root{--band: clamp(44px, min(6.2vw, 9vh), 84px);--seam: clamp(30px, 3.2vw, 46px);--elev-1: 0 1px 1px rgba(4,38,74,.04), 0 2px 6px rgba(4,38,74,.045);--elev-2: 0 1px 2px rgba(8,74,140,.06), 0 8px 28px rgba(8,74,140,.07);--elev-3: 0 18px 48px rgba(4,38,74,.16);--line-soft: color-mix(in oklab, var(--border) 70%, var(--card))}
.my365-page .proj-card, .my365-page .markup-table-wrap{
  box-shadow: var(--elev-1);
  border-color: var(--line-soft);
}
.my365-page .tier-card{
  box-shadow: var(--elev-2);
  border-color: var(--line-soft);
}
.my365-page.my365-chrome > header.site-header{ view-transition-name: my365-header; }
.my365-page.my365-chrome:has(> header.site-header){ display: contents; }
.my365-page.my365-chrome > header.site-header{
  top: var(--wp-admin--admin-bar--height, 0px);
}

/* Legacy alias: --ink was only ever defined under [data-theme="dark"]. */
:root{ --ink: var(--nl-ink); }

/* Sections meet the chrome edge to edge, as on the parent.
   netlogiccomputer.com emits its own <main class="nl-main"> and has no
   post-content block, so Assembler's
   :where(.wp-block-post-content){padding-top:spacing-20; padding-bottom:spacing-60}
   never applies there. Ours sits inside that block, which opened a 21px strip under
   the header and a 53-125px strip above the footer (spacing-60 scales with width).
   Measured on the parent: 0px at both edges. :where() has zero specificity, so a
   plain class selector wins. This sheet only loads on pages wearing our chrome. */
.wp-block-post-content{ padding-top: 0; padding-bottom: 0; }

/* Breadcrumb on the dark page hero. netlogic.css intends
   `.nl-breadcrumb a { color: var(--nl-blue-300) }`, but
   `.nl-main :is(p, li, ...) a` is more specific and repaints it blue-700, dark on
   navy at 2.36:1. netlogiccomputer.com has the SAME defect today (its /about-us/
   breadcrumb computes rgb(10,95,168) on navy from the same two rules). This restores
   the parent's intended colour rather than inventing a new one.
   The competing selector is `.nl-main :is(..., .nl-checklist span, ...) a:not(.nl-btn)
   :not(.nl-card):not(.nl-card__more)`, specificity (0,5,2). A plain (0,3,1) override
   was tested in the browser and LOST; mirroring the :not() chain gives (0,6,1).
   Measured with it injected: 2.36:1 -> 7.25:1, and no other link changes. */
.nl-main .nl-pagehero .nl-breadcrumb a:not(.nl-btn):not(.nl-card):not(.nl-card__more){ color: var(--nl-blue-300); }

/* Visually hidden text (.nl-sr, e.g. the footer's "Site footer" heading) took the
   theme's heading font, Inter. Measured on /plans/ it was the ONLY element on the page
   set in Inter, so every page load fetched Inter for text nobody sees. */
.nl-sr{ font-family: inherit; }

/* Cognito intake form: match the parent's submit button. The parent's Cognito form
   renders its primary button navy rgb(8,74,140) with white text; ours was teal
   rgb(32,133,183) at 4.12:1. Cognito themes through custom properties, so set the
   variable on the button rather than out-specify Cognito's :root:root:root chains. */
.cognito-embed .cog-button--primary{
  --button-primary__background-color: #084A8C;
  --button-primary__border-color: #084A8C;
}

/* Lists inside FAQ answers. The parent's answers are paragraphs only (.nl-faq__a p + p
   gets 12px), so a list sat flush against the paragraph above and below it (0px, measured
   on /faqs/). Give lists the same 12px rhythm. */
.nl-faq__a > ul{ margin-top: 12px; }
.nl-faq__a > ul + p{ margin-top: 12px; }

/* Monty's speech bubble sits over his shoulder by design (about 80px of overlap at
   every width), but nothing set its stacking order, so the image painted over it and
   clipped the text to "Hi, I'm Mon". */
.hero-monty .monty-bubble{ z-index: 2; }

/* Plan cards side by side (/plans/): each section sits on one shared line across both
   cards. Each card stacked its own content, so the Plus card's extra eyebrow
   ("Best value on 1-Year"), two-line terms and taller rate table pushed its sections
   down. Measured at 1400px: titles 44px apart, rate tables 71px, "What you get" 123px.
   Subgrid makes the two cards share nine row tracks, one per section. Each row is as
   tall as the taller card's section, so an absent eyebrow leaves an aligned gap rather
   than shifting everything up. Rows are placed by role, not by order, because the
   eyebrow is optional.
   - Spacing: .nl-card sets gap:10px, and a subgrid keeps its own gap when one is set,
     so the sections keep the flex layout's 10px. Measured: identical positions and
     card heights with or without a 10px override on the parent grid.
   - The gate (:not(:has(...))) switches the layout off when a card holds anything
     outside the nine roles, or anything after the checklist except the button. An
     unplaced child would otherwise land in Learn's empty row 1 or on top of Plus's
     button, and a second checklist would open an extra column. Tested by injecting a
     footnote, a second label and list, and an icon: each fell back to the plain
     stacked cards with nothing overlapping.
   - The button row is top-aligned like every other row (margin-top:0). At 601-~680px
     "Talk to us about Plus" wraps, and the parent's margin-top:auto put Learn's
     shorter button 20px lower. This sits behind the gate so the stacked fallback keeps
     its bottom-pinned buttons.
   - If no card has an eyebrow, row 1 is empty in both and the title would sit 16px
     lower than the plain layout (measured: 49px from the card top instead of 33px).
     The title then spans rows 1-2. Measured with the eyebrow removed: 33px.
   - @supports: a browser with :has() but no subgrid (Safari 15.4-15.x, Chrome
     105-116) would get per-card grids that are looser than the flex column. Without
     the wrapper those browsers keep the plain layout.
   - Below 601px the cards stack and keep the parent's flex column. */
@supports (grid-template-rows: subgrid){
  @media (min-width:601px){
    .nl-grid--2:has(> .nl-card > .nl-glance):not(:has(> .nl-card > :not(.nl-eyebrow, h3, h3 + p, .nl-figures, .nl-figures + p, .nl-glance, .nl-label, .nl-checklist, .nl-card__more), > .nl-card > .nl-checklist ~ :not(.nl-card__more))) > .nl-card{ display: grid; grid-template-rows: subgrid; grid-row: span 9; }
    .nl-grid--2:has(> .nl-card > .nl-glance):not(:has(> .nl-card > :not(.nl-eyebrow, h3, h3 + p, .nl-figures, .nl-figures + p, .nl-glance, .nl-label, .nl-checklist, .nl-card__more), > .nl-card > .nl-checklist ~ :not(.nl-card__more))) > .nl-card > .nl-card__more{ margin-top: 0; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-eyebrow{ grid-row: 1; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > h3{ grid-row: 2; }
    .nl-grid--2:has(> .nl-card > .nl-glance):not(:has(> .nl-card > .nl-eyebrow)) > .nl-card > h3{ grid-row: 1 / span 2; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > h3 + p{ grid-row: 3; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-figures{ grid-row: 4; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-figures + p{ grid-row: 5; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-glance{ grid-row: 6; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-label{ grid-row: 7; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-checklist{ grid-row: 8; }
    .nl-grid--2:has(> .nl-card > .nl-glance) > .nl-card > .nl-card__more{ grid-row: 9; }
  }
}

/* Rate tables (.nl-glance on /plans/): values in the same row sit on one line.
   "Cost per Service Activity" wraps to two lines, so its value sat 20px below the
   value beside it. Each cell becomes a two-row subgrid (label, value) of the table, so
   every label in a row shares one track. Label rows are min-content and value rows
   auto: when a table is stretched to match a taller neighbour, only the value rows
   take the extra height, so values stay under their labels and in line with the
   other card's values (stretching every row put Learn's values 13px lower).
   Measured at 1400px: 0px spread in every row of all three tables.
   The gate keeps the parent's layout for any table whose cells are not exactly
   label + value. Tested with a three-child cell: that table fell back, the rest held. */
@supports (grid-template-rows: subgrid){
  .nl-glance:not(:has(> div > :nth-child(3), > div > :only-child, > :not(div))){ grid-auto-rows: min-content auto; }
  .nl-glance:not(:has(> div > :nth-child(3), > div > :only-child, > :not(div))) > div{ display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 5px; }
}

/* Comparison cards (.nl-grid--compare, opted in by class in the page markup):
   side-by-side cards with the same children in the same order share row lines, so
   matching sections start on one line. Used on /profit-model/ (the two billing models,
   and the Monthly vs 1-Year project cards) and /baseline-builder/ (Learn vs Plus, and
   the Windows vs macOS guides). Measured drift before: figures 25px, project rows
   21px, lists 24-25px. Measured with this injected: 0px (1px on the project tags,
   from the 1-Year card's 2px border).
   - The span is set from the card's own child count (2-8). A card with 9 or more
     children matches nothing here and keeps the flex column.
   - align-items:start keeps the flex layout's behaviour: nothing stretches to its
     row's height (a wrapped tag would otherwise stretch its neighbour's tag).
   - Horizontally a grid item stretches like a flex item, so widths are unchanged,
     except .bl-tier-tag, which set align-self:flex-start to stay pill-width in the
     flex column. In a grid that property is vertical, so it needs justify-self.
   - Spacing comes from .nl-card's own gap:10px; the parent keeps its 22px.
   - A trailing .nl-card__more link is top-aligned in its row like everything else.
     The parent's margin-top:auto bottom-aligned it, so at 601px, where one guide's
     link wraps, the two links started 24px apart. Scoped to the same selector as the
     grid rule, so a card left in the flex column keeps its bottom-pinned link.
   Measured with this injected at 1400, 980, 800, 700 and 601px: 0px drift in all
   four grids, no card child changed width, and 375px unchanged. */
@supports (grid-template-rows: subgrid){
  @media (min-width:601px){
    .nl-grid--compare > .nl-card:has(> :nth-child(2)):not(:has(> :nth-child(9))){ display: grid; grid-template-rows: subgrid; align-items: start; }
    .nl-grid--compare > .nl-card:has(> :nth-child(2)):not(:has(> :nth-child(9))) > .nl-card__more{ margin-top: 0; }
    .nl-grid--compare > .nl-card:has(> :nth-child(2):last-child){ grid-row: span 2; }
    .nl-grid--compare > .nl-card:has(> :nth-child(3):last-child){ grid-row: span 3; }
    .nl-grid--compare > .nl-card:has(> :nth-child(4):last-child){ grid-row: span 4; }
    .nl-grid--compare > .nl-card:has(> :nth-child(5):last-child){ grid-row: span 5; }
    .nl-grid--compare > .nl-card:has(> :nth-child(6):last-child){ grid-row: span 6; }
    .nl-grid--compare > .nl-card:has(> :nth-child(7):last-child){ grid-row: span 7; }
    .nl-grid--compare > .nl-card:has(> :nth-child(8):last-child){ grid-row: span 8; }
    .nl-grid--compare > .nl-card > .bl-tier-tag{ justify-self: start; }
  }
}

/* Pricing calculator inputs: the two number boxes sit on one line. Each field stacks
   title, input and hint, and at ~660-739px "Microsoft 365 client tenants you manage"
   wraps to two lines while "Project hours per month" fits on one, so the client box
   sat 18px below the hours box (measured 660 and 700px). Each label becomes a
   three-row subgrid of .calc-inputs, so titles, boxes and hints share rows. The
   label's own 6px gap is kept (row-gap is set on the subgrid). The gate keeps the
   flex column for any field that is not exactly title + input + hint; tested by adding
   a fourth child: it fell back. Measured with this injected: 0px at 660 and 700px;
   1400, 980, 740 and 601px unchanged (already aligned); box widths and gaps
   unchanged; below 601px the fields stack as before. */
@supports (grid-template-rows: subgrid){
  @media (min-width:601px){
    .my365-page .calc-inputs:not(:has(> :not(label), > label > :nth-child(4), > label > :nth-child(2):last-child, > label > :only-child)) > label{ display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; }
  }
}