/* Use cases section (list page + detail pages) - styles added on top of index.css.
   Moved from the approved mock (workspace/website-mock), minus the photo slot, the FAQ
   section and the draft marker, which are not part of the built pages. */

a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* list page: hero */
.apps-hero .wrap, .app-group .wrap, .app-help .wrap { max-width: 1240px; margin-inline: auto; }
.apps-hero { position: relative; padding: 150px 8% 72px; overflow: hidden;
  background: linear-gradient(135deg, #ceaed422 0%, #abd4e615 25%, #73edc018 50%, #8c91e810 100%); }
.apps-hero h1 { font-size: clamp(36px, 4.5vw, 58px); font-weight: 700; line-height: 1.12;
  color: #111; margin: 6px 0 20px; text-wrap: balance; max-width: 900px; }
.apps-hero h1 span { color: var(--green); }
.apps-hero .subhead { font-size: 18px; line-height: 1.6; color: #4b4b4b; max-width: 680px; }
.apps-jump { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.apps-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 24px; border: 1px solid #dfe3da; background: rgba(255,255,255,.8);
  color: #2b2929; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: border-color .2s, color .2s; }
.apps-jump a span { font-size: 12px; font-weight: 700; color: #3f7f1b;
  background: rgba(90,160,44,.12); border-radius: 10px; padding: 1px 7px; }
.apps-jump a:hover { border-color: var(--green); color: var(--green); }
.apps-jump a.to-help { background: var(--green); border-color: var(--green); color: #fff; }
.apps-jump a.to-help:hover { background: var(--green-light); border-color: var(--green-light); color: #fff; }

/* list page: use case groups and cards */
.app-group { background: #fff; }
.app-group.is-alt { background: #f9f9f9; }
.app-group .section-body { margin-bottom: 36px; }
.app-subhead { font-size: 15px; font-weight: 700; color: #111; margin: 8px 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid #e6e8e3; }
.app-subhead ~ .app-subhead { margin-top: 36px; }
.app-grid { display: grid; gap: 20px; }
.app-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-card { background: #fff; border: 1px solid #e6e8e3; border-radius: 14px;
  padding: 24px 22px 20px; display: grid; grid-template-rows: subgrid; grid-row: span 4;
  row-gap: 12px; align-content: start;
  position: relative; transition: border-color .25s, transform .25s, box-shadow .25s; }
.app-card:hover { border-color: var(--green); transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.06); }
.app-card.has-detail { border-color: #d3e4c4; }
.app-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: #111; text-wrap: balance; }
.app-card p { font-size: 15px; line-height: 1.6; color: #595959; }
.app-uses { align-self: end; padding-top: 12px; border-top: 1px solid #eef0ec;
  display: flex; flex-direction: column; gap: 8px; }
.app-uses-label { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #8a8d86; }
.app-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app-tags span { font-size: 12px; font-weight: 600; color: #3f7f1b;
  background: rgba(90,160,44,.1); border-radius: 6px; padding: 3px 8px; }
.app-more { align-self: flex-start; font-size: 14px; font-weight: 500; color: #3f7f1b;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
/* The Details link covers the whole card, so a click anywhere on it opens the page */
.app-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app-card.has-detail:hover .app-more { color: var(--green); }
.app-more i { transition: transform .2s; }
.app-card.has-detail:hover .app-more i { transform: translateX(3px); }
.app-more:focus-visible { outline: none; }
.app-card.has-detail:has(.app-more:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* list page: "we can help" section - carries the #contact anchor for the nav via a
   zero-size target span, so it can keep its own layout instead of the shared #contact look */
.app-help { background: var(--dark); }
.app-help .anchor-target { display: block; scroll-margin-top: 64px; }
.app-help .section-label { color: var(--green); }
.app-help .section-title { color: #fff; }
.app-help .section-body { color: var(--grey); margin-bottom: 40px; }
/* Three ways to work with us: the three routes lead, the offers sit inside them */
.tier-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; align-items: start; }
.tier { background: #fff; border: 1px solid #e6e8e3; border-radius: 16px; padding: 26px 24px 22px; }
.tier-head { display: flex; align-items: center; gap: 12px; }
.tier-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--green);
  color: #fff; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; font-variant-numeric: tabular-nums; }
.tier-head h3 { font-size: 22px; font-weight: 700; color: #111; line-height: 1.2; }
.tier-text { margin: 14px 0 18px; font-size: 15.5px; line-height: 1.6; color: #4b4b4b; }
.tier-list { list-style: none; display: grid; gap: 14px; border-top: 1px solid #eef0ec; padding-top: 18px; }
.tier-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.tier-list i { color: var(--green); font-size: 16px; line-height: 1.5; }
.tier-list b { display: block; font-size: 15px; font-weight: 600; color: #111; }
.tier-list span { font-size: 14.5px; line-height: 1.55; color: #595959; }

/* Group map: the whole section at a glance, before the card lists */
.apps-map { padding: 72px 8% 56px; }
.apps-map .wrap, .apps-benefits .wrap { max-width: 1240px; margin-inline: auto; }
.map-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* The photo fills the tile and the text sits on a dark fade over it.
   Tiles are the same shape as the photos, so object-fit cuts nothing off the sides. */
.map-tile { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 3;
  overflow: hidden; background: #12121a; border-radius: 14px; text-decoration: none;
  transition: transform .25s; }
.map-tile:hover { transform: translateY(-3px); }
.map-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; background: #eef0ec; }
/* The fade covers the whole tile and never moves, so the text box can grow on hover
   without dragging a visible edge across the photo. */
.map-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,10,6,.9) 0%, rgba(8,10,6,.82) 12%, rgba(8,10,6,.66) 26%, rgba(8,10,6,.46) 40%,
    rgba(8,10,6,.28) 54%, rgba(8,10,6,.14) 68%, rgba(8,10,6,.05) 84%, rgba(8,10,6,0) 100%); }
.map-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(8,10,6,.3); opacity: 0; transition: opacity .3s; }
.map-tile:hover::before { opacity: 1; }

/* At rest only the name shows, low in the frame. The intro opens on hover. */
.map-tile-body { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.map-tile h3 { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.3; }
.map-tile p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.84);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease; }
.map-tile:hover p { max-height: 90px; opacity: 1; }
.map-tile span { padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--green-light); }

/* What your team gets */
/* Closes the browsing part of the page, so it reads as its own chapter */
.apps-benefits { padding: 90px 8%; background: #f9f9f9; }
.benefit-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.benefit { border-top: 2px solid var(--green); padding-top: 14px; }
.benefit h3 { font-size: 16px; font-weight: 600; color: #111; line-height: 1.35; }
.benefit p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #595959; }

/* Category bar: sticks under the nav, shows where you are, and filters to one category.
   Without JavaScript the chips stay plain anchor links and nothing is hidden. */
.apps-browse { position: relative; }
.cat-bar { position: sticky; top: 64px; z-index: 90; padding: 0 8%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #eee; border-bottom: 1px solid #e6e8e3; }
.cat-bar .wrap { max-width: 1240px; margin-inline: auto; padding: 10px 0;
  display: flex; gap: 7px; align-items: center;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cat-bar .wrap::-webkit-scrollbar { display: none; }
.cat-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 13px; border-radius: 22px; border: 1px solid #e6e8e3; background: #fff;
  color: #4b4b4b; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s; }
.cat-chip span { font-size: 12px; font-weight: 700; color: #3f7f1b;
  background: rgba(90,160,44,.1); border-radius: 10px; padding: 1px 7px;
  font-variant-numeric: tabular-nums; }
.cat-chip:hover { border-color: var(--green); color: var(--green); }
.cat-chip.is-current { background: var(--green); border-color: var(--green); color: #fff; }
.cat-chip.is-current span { color: #fff; background: rgba(255,255,255,.22); }
/* Filtered view: the bar is the only way back, so it must stay reachable */
.app-group[hidden] { display: none; }
.app-group { scroll-margin-top: 124px; }

.hero-note { margin-top: 12px; }
/* "Get in touch" closes the three routes, so it stays close to the three cards */
.help-contact { margin-top: 36px; padding-top: 34px; border-top: 1px solid var(--card-bd);
  text-align: center; }
.help-contact p { color: #fff; font-size: 22px; font-weight: 600; }
.help-contact .contact-email { margin-top: 20px; font-size: 20px; padding: 20px 36px; }
.help-contact .contact-email i { font-size: 24px; }
/* index.js reveals section children only once they pass a line 10% above the
   viewport bottom. The last block on the page never gets there, so it is left out. */
.help-contact.reveal { opacity: 1; transform: none; }

/* detail pages */
.d-hero .wrap, .d-sec .wrap { max-width: 1140px; margin-inline: auto; }
.crumbs { font-size: 13px; color: #6b6e68; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: #3f7f1b; text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.crumbs i { font-size: 11px; color: #9a9d96; }

.d-hero { padding: 120px 8% 64px;
  background: linear-gradient(135deg, #ceaed422 0%, #abd4e615 25%, #73edc018 50%, #8c91e810 100%); }
.d-hero .section-label { margin-top: 22px; }
.d-hero h1 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; line-height: 1.1; color: #111;
  margin: 4px 0 18px; text-wrap: balance; max-width: 760px; }
.d-hero .subhead { font-size: 18px; line-height: 1.6; color: #4b4b4b; max-width: 560px; }
.d-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.d-cta .btn-primary:hover { background: var(--green-light); }
.d-cta .text-link { color: #3f7f1b; font-weight: 500; text-decoration: none; font-size: 15px; }
.d-cta .text-link:hover { color: var(--green); }

.d-sec { background: #fff; }
.d-sec.is-alt { background: #f9f9f9; }
.d-sec .section-body { margin-bottom: 28px; }
.d-sec ul.plain { list-style: none; display: grid; gap: 10px; max-width: 640px; }
.d-sec ul.plain li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.55; color: #333; }
.d-sec ul.plain li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); }
.d-note { margin-top: 22px; font-size: 16px; color: #595959; max-width: 640px; line-height: 1.6; }

ol.steps { list-style: none; counter-reset: s; display: grid; gap: 12px; max-width: 760px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px;
  align-items: baseline; font-size: 16px; line-height: 1.55; color: #333; }
ol.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%;
  background: rgba(90,160,44,.12); color: #3f7f1b; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }

.fig { margin: 0; }
.fig-scroll { overflow-x: auto; background: #fff; border: 1px solid #e6e8e3; border-radius: 14px; padding: 20px; }
.fig svg { display: block; width: 100%; height: auto; min-width: 720px; }
.fig figcaption { margin-top: 12px; font-size: 14px; color: #6b6e68; line-height: 1.55; max-width: 760px; }
.stack { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.stack-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--green); }
.stack-rail i { font-size: 20px; line-height: 1; }
.rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #3f7f1b; }
.stack-rail::after { content: ""; flex: 1; width: 2px; background: linear-gradient(var(--green), rgba(90,160,44,.12)); }
.stack-layers { display: grid; gap: 10px; }
.layer { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center;
  background: #fff; border: 1px solid #e6e8e3; border-radius: 12px; padding: 14px 16px; }
.layer.is-openeol { border-color: rgba(90,160,44,.55); background: #f6fbf2; }
.layer-name b { display: block; font-size: 15px; color: #111; }
.layer-name span { font-size: 13px; color: #6b6e68; }
.layer-parts { display: flex; flex-wrap: wrap; gap: 10px; }
.part { flex: 1 1 200px; min-width: 0; border: 1px solid #eceee9; border-radius: 10px; padding: 10px 12px; background: #fff; }
.part b { font-size: 14px; color: #111; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.part .part-d { display: block; font-size: 13px; color: #595959; line-height: 1.45; margin-top: 3px; }
.oss { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3f7f1b;
  background: rgba(90,160,44,.12); border-radius: 10px; padding: 1px 7px; }

.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rel-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e6e8e3;
  border-radius: 14px; padding: 22px; text-decoration: none; transition: border-color .25s, transform .25s; }
.rel-card:hover { border-color: var(--green); transform: translateY(-3px); }
.rel-card h3 { font-size: 17px; font-weight: 600; color: #111; line-height: 1.3; }
.rel-card p { font-size: 15px; line-height: 1.55; color: #595959; }
.rel-card span { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: #3f7f1b; }

#contact .btn-primary { margin-top: 8px; }

@media (max-width: 1200px) {
  .app-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-grid { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .apps-hero { padding-top: 110px; }
  .app-grid.grid-3, .app-grid.grid-4, .tier-grid,
  .map-grid, .benefit-grid { grid-template-columns: 1fr; }
  .d-hero { padding-top: 96px; }
  .rel { grid-template-columns: 1fr; }
  .layer { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 700px) {
  .cat-bar .wrap { padding-inline: 5%; }
  .cat-chip { font-size: 13px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cat-chip { transition: none; }
  .app-card, .app-card:hover, .card, .card:hover, .rel-card, .rel-card:hover,
  .map-tile, .map-tile:hover { transition: none; transform: none; }
  .map-tile p, .map-tile::before { transition: none; }
}