/* Phase 14: common accessories styles */
/* SS Computers - shared accessory page styles */
/* Common rules extracted from the seven accessory page stylesheets. */

.software-modern-action b,
.hinge-modern-action b,
.battery-modern-action b,
.display-modern-action b,
.keyboard-modern-action b,
.toner-modern-action b,
.refurb-modern-action b {
  margin-top: 10px;
  color: #0874d8;
  font-size: 13px;
}

.software-step-grid,
.software-use-grid-modern,
.software-related-grid,
.hinge-step-grid,
.hinge-problem-grid,
.hinge-brand-grid,
.hinge-related-grid,
.battery-step-grid,
.battery-symptom-grid,
.battery-brand-grid,
.battery-support-grid,
.display-step-grid,
.display-problem-grid-modern,
.display-brand-grid,
.display-related-grid-modern,
.keyboard-step-grid,
.keyboard-problem-grid-modern,
.keyboard-brand-grid,
.keyboard-related-grid-modern,
.toner-step-grid,
.toner-problem-grid-modern,
.toner-related-grid,
.refurb-upgrade-grid-premium {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}

.topbar .container {
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.topbar .container>.eco-topline {
  display: block;
  flex: 1 1 280px;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.topbar .container>.topbar-call {
  white-space: nowrap;
}

.software-check-grid,
.hinge-check-grid,
.battery-checklist,
.display-check-grid-modern,
.keyboard-check-grid,
.toner-check-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin-top: 22px;
}

.software-check-item,
.hinge-check-item,
.battery-check-item,
.display-check-item,
.keyboard-check-item,
.toner-check-item {
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #d7e7f6;
  box-shadow: 0 12px 28px rgba(18,75,133,.08);
}

.software-check-item p,
.hinge-check-item p,
.battery-check-item p,
.display-check-item p,
.keyboard-check-item p,
.toner-check-item p {
  margin: 8px 0 0;
  color: #647991;
  font-size: 14px;
  line-height: 1.6;
}

.software-confidence-copy h2,
.hinge-confidence-copy h2,
.battery-confidence-copy h2,
.display-confidence-copy h2,
.keyboard-confidence-copy h2,
.toner-confidence-copy h2 {
  margin: 14px 0 0;
  color: #123f7a;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.12;
}

.software-confidence-copy p,
.hinge-confidence-copy p,
.battery-confidence-copy p,
.display-confidence-copy p,
.keyboard-confidence-copy p,
.toner-confidence-copy p {
  margin: 12px 0 0;
  color: #60758d;
  font-size: 16px;
  line-height: 1.7;
}

.software-heading-modern,
.hinge-heading-modern,
.battery-heading,
.display-heading-modern,
.keyboard-heading-modern,
.toner-heading-modern {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 28px;
}

.software-heading-modern h2,
.hinge-heading-modern h2,
.battery-heading h2,
.display-heading-modern h2,
.keyboard-heading-modern h2,
.toner-heading-modern h2 {
  margin: 14px 0 0;
  color: #123f7a;
  font-size: clamp(28px,3vw,42px);
  line-height: 1.15;
}

.software-heading-modern p,
.hinge-heading-modern p,
.battery-heading p,
.display-heading-modern p,
.keyboard-heading-modern p,
.toner-heading-modern p {
  margin: 10px auto 0;
  max-width: 780px;
  color: #60758d;
  font-size: 16px;
  line-height: 1.65;
}

.software-modern-action small,
.hinge-modern-action small,
.battery-modern-action small,
.display-modern-action small,
.keyboard-modern-action small,
.toner-modern-action small {
  margin-top: 8px;
  color: #5e7692;
  font-size: 13px;
  line-height: 1.5;
}

.software-modern-action span,
.hinge-modern-action span,
.battery-modern-action span,
.display-modern-action span,
.keyboard-modern-action span,
.toner-modern-action span {
  color: #68809c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.software-modern-action strong,
.hinge-modern-action strong,
.battery-modern-action strong,
.display-modern-action strong,
.keyboard-modern-action strong,
.toner-modern-action strong {
  margin-top: 6px;
  color: #123f7a;
  font-size: 18px;
  line-height: 1.25;
}

.software-modern-banner,
.hinge-modern-banner,
.battery-modern-banner,
.display-modern-banner,
.keyboard-modern-banner,
.toner-modern-banner {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #d4e5f7;
  background: #fff;
  box-shadow: 0 18px 48px rgba(19,71,127,.12);
}

.software-modern-banner img,
.hinge-modern-banner img,
.battery-modern-banner img,
.display-modern-banner img,
.keyboard-modern-banner img,
.toner-modern-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.software-modern-intro,
.hinge-modern-intro,
.battery-modern-intro,
.display-modern-intro,
.keyboard-modern-intro,
.toner-modern-intro {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.software-modern-intro p,
.hinge-modern-intro p,
.battery-modern-intro p,
.display-modern-intro p,
.keyboard-modern-intro p,
.toner-modern-intro p {
  margin: 10px 0 0;
  color: #60758d;
  font-size: 15px;
  line-height: 1.65;
}

.software-modern-section,
.software-confidence,
.hinge-modern-section,
.hinge-confidence,
.battery-confidence,
.display-modern-section,
.display-confidence,
.keyboard-modern-section,
.keyboard-confidence,
.toner-modern-section,
.toner-confidence {
  padding: 28px 0;
}

.software-modern-trust,
.hinge-modern-trust,
.battery-modern-trust,
.display-modern-trust,
.keyboard-modern-trust,
.toner-modern-trust {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}

.software-modern-wrap,
.software-step-strip .container,
.software-modern-section .container,
.software-confidence .container,
.software-modern-cta .container,
.seo-faq .container,
.hinge-modern-wrap,
.hinge-step-strip .container,
.hinge-modern-section .container,
.hinge-confidence .container,
.hinge-modern-cta .container,
.seo-faq .container,
.battery-modern-wrap,.battery-step-strip .container,.battery-section .container,.battery-confidence .container,.battery-cta .container,.seo-faq .container,
.display-modern-wrap,
.display-step-strip .container,
.display-modern-section .container,
.display-confidence .container,
.display-modern-cta .container,
.seo-faq .container,
.keyboard-modern-wrap,
.keyboard-step-strip .container,
.keyboard-modern-section .container,
.keyboard-confidence .container,
.keyboard-cta .container,
.seo-faq .container,
.toner-modern-wrap,
.toner-step-strip .container,
.toner-modern-section .container,
.toner-confidence .container,
.toner-modern-cta .container,
.seo-faq .container {
  width: calc(100% - 48px);
  max-width: 1440px;
  margin: 0 auto;
}

.software-service-card-modern p,
.hinge-problem-card p,
.battery-symptom-card p,
.display-problem-card p,
.keyboard-problem-card p,
.toner-problem-card p {
  margin: 10px 0 0;
  color: #617790;
  font-size: 14px;
  line-height: 1.65;
}

.software-spec-note,
.hinge-spec-note,
.battery-spec-note,
.display-spec-note,
.keyboard-spec-note,
.toner-spec-note {
  margin-top: 14px;
  color: #6b8097;
  font-size: 13px;
  line-height: 1.6;
}

.software-spec-panel,
.hinge-spec-panel,
.battery-spec-panel,
.display-spec-panel,
.keyboard-spec-panel,
.toner-spec-panel {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #d7e7f7;
  box-shadow: 0 14px 34px rgba(17,72,127,.09);
}

.software-spec-row,
.hinge-spec-row,
.battery-spec-row,
.display-spec-row,
.keyboard-spec-row,
.toner-spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed #cfe0f3;
}

.software-spec-row span,
.hinge-spec-row span,
.battery-spec-row span,
.display-spec-row span,
.keyboard-spec-row span,
.toner-spec-row span {
  color: #698099;
  font-size: 14px;
}

.software-spec-row:first-child,
.hinge-spec-row:first-child,
.battery-spec-row:first-child,
.display-spec-row:first-child,
.keyboard-spec-row:first-child,
.toner-spec-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.software-step-card,
.hinge-step-card,
.battery-step-card,
.display-step-card,
.keyboard-step-card,
.toner-step-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #d7e7f7;
  box-shadow: 0 10px 24px rgba(17,73,130,.07);
}

.software-step-card p,
.hinge-step-card p,
.battery-step-card p,
.display-step-card p,
.keyboard-step-card p,
.toner-step-card p {
  margin: 7px 0 0;
  color: #657991;
  font-size: 14px;
  line-height: 1.55;
}

.software-step-strip,
.hinge-step-strip,
.battery-step-strip,
.display-step-strip,
.keyboard-step-strip,
.toner-step-strip {
  padding: 6px 0 24px;
}

.software-use-card p,
.hinge-brand-card p,
.battery-brand-card p,
.display-brand-card p,
.keyboard-brand-card p,
.toner-brand-card p {
  margin: 9px 0 0;
  color: #647a92;
  font-size: 14px;
  line-height: 1.6;
}

/* Phase 14: page-specific styles */
/* SS Computers - computer-software page styles moved from inline HTML */

/* Environmental message in the existing top contact bar. */


@media (min-width:801px) and (max-width:1160px){.topbar .container>.eco-topline{order:3;flex-basis:100%}}
@media (max-width:800px){.topbar .container{justify-content:center;gap:3px 12px;text-align:center}.topbar .container>span:first-child:not(.eco-topline):not(.topbar-call){display:none}.topbar .container>.topbar-call{order:1}.topbar .container>.eco-topline{order:2;flex:0 0 100%;font-size:13px;font-weight:800}}

.software-page{background:linear-gradient(180deg,#f7fbff 0%,#f1f7ff 35%,#fff 100%)}
.software-modern-hero{padding:20px 0 28px}


.software-modern-actions{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:16px;margin-top:18px}
.software-modern-intro,.software-modern-action{
  background:#fff;border:1px solid #d7e6f6;border-radius:24px;
  box-shadow:0 12px 34px rgba(20,73,131,.08)
}

.software-modern-intro span{
  width:max-content;padding:8px 14px;border-radius:999px;background:#e8f3ff;
  border:1px solid #cfe3fa;color:#0b72df;font-size:12px;font-weight:900;letter-spacing:.12em
}
.software-modern-intro h1{margin:14px 0 0;color:#123f7a;font-size:clamp(26px,2.6vw,38px);line-height:1.12}
.software-modern-intro h1 em{font-style:normal;color:#10a6a0}


.software-modern-action{
  padding:20px;text-decoration:none;display:flex;flex-direction:column;justify-content:center;transition:.22s ease
}
.software-modern-action:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,85,151,.16);border-color:#8dc4f5}


.software-modern-trust div{
  padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #dce9f7;
  color:#38516e;text-align:center;font-size:13px;font-weight:800;
  box-shadow:0 8px 22px rgba(21,82,141,.05)
}


.software-step-card .num{
  flex:0 0 58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:22px
}
.software-step-card:nth-child(1) .num{background:#efe8ff;color:#714cf7}
.software-step-card:nth-child(2) .num{background:#e5f2ff;color:#1578e5}
.software-step-card:nth-child(3) .num{background:#e7fbf1;color:#0a9b65}
.software-step-card:nth-child(4) .num{background:#fff1df;color:#eb7b00}
.software-step-card h3{margin:0;color:#123f7a;font-size:22px;line-height:1.15}


.software-light{background:linear-gradient(180deg,#fff,#f8fbff)}

.software-heading-modern span{
  display:inline-flex;padding:8px 14px;border-radius:999px;background:#edf6ff;
  border:1px solid #d4e7fb;color:#0b70da;font-size:12px;font-weight:900;letter-spacing:.12em
}


.software-service-grid-modern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.software-service-card-modern{
  padding:24px;border-radius:24px;background:#fff;border:1px solid #d9e7f7;
  box-shadow:0 12px 28px rgba(20,78,138,.07)
}
.software-service-card-modern .icon{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  font-size:18px;font-weight:900;margin-bottom:16px
}
.software-service-card-modern:nth-child(1) .icon{background:#e8f2ff;color:#156fd1}
.software-service-card-modern:nth-child(2) .icon{background:#eee9ff;color:#694ad9}
.software-service-card-modern:nth-child(3) .icon{background:#e9fbff;color:#0087a8}
.software-service-card-modern:nth-child(4) .icon{background:#e9fbef;color:#15985c}
.software-service-card-modern:nth-child(5) .icon{background:#fff1e6;color:#e97800}
.software-service-card-modern:nth-child(6) .icon{background:#ffeafb;color:#c0469e}
.software-service-card-modern h3{margin:0;color:#143f79;font-size:21px}

.software-service-card-modern ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.software-service-card-modern li{padding-left:18px;position:relative;color:#46617f;font-size:13px}
.software-service-card-modern li:before{content:"✓";position:absolute;left:0;color:#0b72df;font-weight:900}


.software-use-card{
  padding:24px;border-radius:24px;background:#fff;border:1px solid #d9e7f8;
  box-shadow:0 12px 28px rgba(20,76,134,.08)
}
.software-use-badge{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:18px;background:linear-gradient(135deg,#edf4ff,#d8ebff);
  color:#0d65bf;border:1px solid #cfe3fa
}
.software-use-card h3{margin:16px 0 0;color:#123f7a;font-size:20px}


.software-confidence-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.software-confidence-copy .mini{
  display:inline-flex;padding:8px 14px;border-radius:999px;background:#edf5ff;
  border:1px solid #d7e7fb;color:#0b72df;font-size:12px;font-weight:900;letter-spacing:.11em
}


.software-check-item small{color:#0a78e0;font-size:12px;font-weight:900}
.software-check-item strong{display:block;margin-top:8px;color:#123f7a;font-size:19px}


.software-spec-panel h3{margin:0 0 18px;color:#123f7a;font-size:28px}


.software-spec-row b{text-align:right;color:#133d79;font-size:15px}


.software-license-modern{
  padding:24px;border-radius:24px;background:linear-gradient(135deg,#0f4f9f,#0d7de1);
  color:#fff;box-shadow:0 18px 40px rgba(15,79,159,.2)
}
.software-license-modern h2{margin:0;font-size:30px;color:#fff}
.software-license-modern p{margin:10px 0 0;line-height:1.7;color:#eaf4ff}


.software-related-grid a{
  padding:24px;border-radius:24px;border:1px solid #d9e7f7;background:#fff;
  box-shadow:0 12px 28px rgba(20,76,134,.07);text-decoration:none
}
.software-related-grid span{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  margin-bottom:14px;font-size:24px;background:#eef5ff;color:#0b72df
}
.software-related-grid strong{display:block;color:#123f7a;font-size:20px}
.software-related-grid small{display:block;margin-top:8px;color:#647991;font-size:14px;line-height:1.55}

@media(max-width:1150px){
  .software-modern-actions{grid-template-columns:1fr 1fr}.software-modern-intro{grid-column:1/-1}
  .software-service-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))}
  .software-use-grid-modern,.software-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .software-confidence-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .software-modern-wrap,.software-step-strip .container,.software-modern-section .container,.software-confidence .container,.software-modern-cta .container,.seo-faq .container{width:calc(100% - 24px)}
  .software-step-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .software-modern-banner{border-radius:16px}
  .software-modern-actions,.software-modern-trust,.software-step-grid,.software-service-grid-modern,.software-use-grid-modern,.software-check-grid,.software-related-grid{grid-template-columns:1fr}
  .software-modern-intro,.software-modern-action,.software-step-card,.software-service-card-modern,.software-use-card,.software-check-item,.software-spec-panel,.software-related-grid a{border-radius:18px}
  .software-spec-row{grid-template-columns:1fr}.software-spec-row b{text-align:left}
}