/* NexaFix website: inner pages (explore, services, charging, vehicles,
   marketplace, community, partners, onboarding, Partner OS).
   Only the owner's palette is used (navy, cyan, energy blue, beige, white and
   the shades listed at the top of style.css). Loaded after style.css. */

/* ---------- Page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + 72px) 0 72px; }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(60% 90% at 85% 0%, rgba(0, 245, 255, .16), transparent 60%),
  radial-gradient(50% 80% at 0% 100%, rgba(38, 132, 255, .22), transparent 60%); }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .5;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.page-hero h1 { max-width: 820px; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.025em; color: var(--white); }
.page-hero h1 span { display: block; color: var(--cyan); }
.page-hero .lead { max-width: 640px; color: #C6C8CE; }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); }
.crumbs .i { width: 14px; height: 14px; }
.section.tight { padding: 80px 0; }

/* ---------- Cards ---------- */
.pcards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pcards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
a.pcard:hover { transform: translateY(-3px); border-color: var(--icon); box-shadow: var(--shadow); }
.pcard h3 { font-size: 19px; line-height: 1.2; }
.pcard p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.pcard .more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--accent); }
.pcard .more .i { width: 16px; height: 16px; }
.tile { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--tint); color: var(--icon); }
.tile .i { width: 23px; height: 23px; }
.pcard .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Ecosystem diagram ---------- */
.eco { position: relative; width: min(640px, 100%); aspect-ratio: 1; margin: 0 auto; }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco-lines line { stroke: var(--icon); stroke-opacity: .4; stroke-width: 1.5px; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.eco-lines circle { fill: none; stroke: var(--border-strong); stroke-width: 1.5px; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.eco-core { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: var(--navy); border: 1px solid rgba(0, 245, 255, .5); box-shadow: 0 0 0 10px var(--tint), 0 0 60px -10px rgba(0, 245, 255, .55); }
.eco-core img { width: 46%; height: auto; }
.eco-node { position: absolute; width: 27%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; text-align: center; font: 600 13.5px/1.2 var(--font-body); }
.eco-node .tile { width: 58px; height: 58px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.eco-node .tile .i { width: 26px; height: 26px; }
.eco-node small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tab { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--fg); font-weight: 500; font-size: 14.5px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tab:hover { border-color: var(--icon); }
.tab[aria-selected="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.tab small { margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
[data-panel][hidden] { display: none; }

/* ---------- Lists with detail ---------- */
.svc-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.svc { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.svc h4 { margin: 0 0 4px; font: 600 16px/1.25 var(--font-display); }
.svc p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.legend { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.legend > div { padding: 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.legend b { display: block; font: 600 17px/1.2 var(--font-display); margin-bottom: 6px; }
.legend p { font-size: 14px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 11.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; background: var(--tint); color: var(--accent); }
.pill.ex { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }

/* ---------- Steps / numbered ---------- */
.nsteps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: n; }
.nstep { counter-increment: n; padding: 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.nstep::before { content: counter(n); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font: 700 16px/1 var(--font-display); }
.nstep h3 { font-size: 18px; margin-bottom: 6px; }
.nstep p { font-size: 14.5px; color: var(--muted); }

/* ---------- Example windows (dashboards, vehicle card) ---------- */
.mock { border-radius: var(--r-lg); background: var(--navy); color: var(--beige); border: 1px solid var(--border-strong); box-shadow: var(--shadow); overflow: hidden; }
.t-light .mock { box-shadow: 0 30px 60px -30px rgba(1, 11, 64, .5); }
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(247, 247, 242, .11); font-size: 13px; color: #B2B5C0; }
.mock-top .pill { background: rgba(0, 245, 255, .12); color: var(--cyan); }
.mock-body { padding: 22px; display: grid; gap: 18px; }
.mock h4 { margin: 0; font: 600 15px/1.2 var(--font-display); color: var(--beige); }
.mock p { color: #B2B5C0; font-size: 13.5px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi { padding: 14px 16px; border-radius: var(--r-sm); background: var(--navy-3); border: 1px solid rgba(247, 247, 242, .09); }
.kpi small { display: block; font-size: 12px; color: #B2B5C0; }
.kpi b { display: block; margin-top: 4px; font: 700 26px/1 var(--font-display); color: var(--white); }
.kpi b em { font-style: normal; font-size: 14px; font-weight: 500; color: #B2B5C0; margin-left: 2px; }
.rows { display: grid; gap: 8px; }
.mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: var(--r-sm); background: var(--navy-3); border: 1px solid rgba(247, 247, 242, .08); font-size: 13.5px; }
.mrow .dotc { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 245, 255, .1); color: var(--cyan); }
.mrow .dotc .i { width: 17px; height: 17px; }
.mrow b { display: block; color: var(--beige); font-weight: 600; }
.mrow span { color: #B2B5C0; }
.mrow em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(38, 132, 255, .22); color: #A9CCFF; }
.mrow em.go { background: rgba(0, 245, 255, .14); color: var(--cyan); }
.mrow em.end { background: rgba(247, 247, 242, .12); color: var(--beige); }
.bar { height: 8px; border-radius: 999px; background: rgba(247, 247, 242, .12); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.mock-split { display: grid; gap: 22px; grid-template-columns: 1.2fr 1fr; }
.mock-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-tabs span { padding: 7px 14px; border-radius: 999px; font-size: 13px; color: #B2B5C0; border: 1px solid rgba(247, 247, 242, .14); }
.mock-tabs span.on { background: var(--cyan); border-color: var(--cyan); color: var(--navy); font-weight: 600; }
.mock-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed rgba(247, 247, 242, .25); font-size: 13px; color: #B2B5C0; }
.mock-note .i { width: 18px; height: 18px; color: var(--cyan); margin-top: 1px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.kv dt { color: #B2B5C0; }
.kv dd { margin: 0; color: var(--beige); font-weight: 500; text-align: right; }

/* ---------- Partner OS layout ---------- */
.os { display: grid; grid-template-columns: 220px 1fr; min-height: 520px; }
.os-nav { padding: 18px 12px; background: #00072E; border-right: 1px solid rgba(247, 247, 242, .1); display: grid; gap: 2px; align-content: start; }
.os-nav img { height: 20px; width: auto; margin: 4px 8px 16px; }
.os-nav a, .os-nav span.it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: #B2B5C0; text-decoration: none; }
.os-nav .on { background: rgba(0, 245, 255, .12); color: var(--cyan); font-weight: 600; }
.os-nav .i { width: 17px; height: 17px; }
.os-main { padding: 24px; display: grid; gap: 20px; align-content: start; }
.os-main h3 { font-size: 24px; color: var(--white); }
.os-head p { margin-top: 4px; }

/* ---------- Wizard ---------- */
.wiz { max-width: 820px; margin: 0 auto; }
.wiz-steps { display: flex; gap: 6px; margin-bottom: 26px; counter-reset: w; }
.wiz-steps li { flex: 1; counter-increment: w; font-size: 12.5px; font-weight: 600; color: var(--muted); border-top: 3px solid var(--border-strong); padding-top: 10px; }
.wiz-steps li::before { content: counter(w) ". "; }
.wiz-steps li.on { color: var(--accent); border-color: var(--icon); }
.wiz-steps li.done { color: var(--fg); border-color: var(--icon); }
.wiz-card { padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.wiz-card h2 { font-size: 26px; margin-bottom: 6px; }
.wiz-card > p { color: var(--muted); margin-bottom: 22px; }
.opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt > span { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px; border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.opt > span b { font: 600 16px/1.2 var(--font-display); }
.opt > span small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.opt input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.opt .i { color: var(--icon); }
.fld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--white); color: var(--navy); font-size: 15px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.fgrid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.fgrid .full { grid-column: 1 / -1; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { position: relative; display: block; }
.checks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.checks span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); font-size: 14px; color: var(--navy); }
.checks input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.checks input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.wiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.wiz-err { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--blue-ink); }
.review { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; font-size: 15px; }
.review dt { color: var(--muted); }
.review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Misc ---------- */
.cta-band { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-band .lead { margin-left: auto; margin-right: auto; }
.cta-band .cta-row { justify-content: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.two { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; align-items: center; }
.rule-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.rule-card h3 { font-size: 22px; margin: 10px 0 8px; }
.plug { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plug > div { padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.plug b { display: block; font: 600 17px/1.2 var(--font-display); }
.plug em { display: block; margin: 4px 0 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.plug p { font-size: 14px; color: var(--muted); }
.t-light .opt > span, .t-light .checks span { background: var(--white); }

@media (max-width: 1000px) {
  .pcards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcards.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .mock-split { grid-template-columns: 1fr; }
  .os { grid-template-columns: 1fr; }
  .os-nav { grid-auto-flow: column; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(247, 247, 242, .1); }
  .os-nav img { display: none; }
  .os-nav a, .os-nav span.it { white-space: nowrap; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 52px; }
  .pcards.c4, .pcards.c3, .pcards.c2 { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .wiz-card { padding: 22px; }
  .wiz-steps li { font-size: 0; }
  .wiz-steps li::before { font-size: 12.5px; }
  .eco-node { width: 31%; font-size: 12px; }
  .eco-node .tile { width: 46px; height: 46px; }
  .eco-node .tile .i { width: 21px; height: 21px; }
  .eco-node small { display: none; }
  .wiz-actions .btn { flex: 1; }
}

/* Card with a photo strip on top (Explore: Vehicle owners) */
.pcard.has-photo { overflow: hidden; }
.pcard-photo { margin: -24px -24px 6px; height: 170px; overflow: hidden; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; display: block; }

/* Photo on top of each step (Explore: Connect. Discover. Act.) */
.nstep:has(.nstep-photo) { overflow: hidden; }
.nstep-photo { margin: -24px -24px 18px; aspect-ratio: 3 / 2; overflow: hidden; }
.nstep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nstep:has(.nstep-photo) { position: relative; }
.nstep:has(.nstep-photo)::before { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; box-shadow: 0 0 0 3px rgba(247, 247, 242, .9); }

/* Photo on top of a service card (Find a service: Maintenance) */
.svc.has-photo { position: relative; flex-direction: column; gap: 12px; overflow: hidden; }
.svc-photo { margin: -18px -18px 4px; aspect-ratio: 3 / 2; overflow: hidden; align-self: stretch; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc.has-photo > .tile { display: none; }

/* Round picture badge instead of the small icon tile (Find a service: Why choose NexaFix) */
.pcard-badge { width: 72px; height: 72px; display: block; }

/* Charging network: plug photos (2026-10-20) */
.plug > div.has-photo { overflow: hidden; }
.plug-photo { margin: -18px -18px 14px; aspect-ratio: 3 / 2; overflow: hidden; }
.plug-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Marketplace grade cards: photo of each grade (2026-10-22) */
.legend > div.has-photo { overflow: hidden; }
.legend-photo { margin: -20px -20px 14px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--white); }
.legend-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }