/* Home page structure and the benchmark. Loaded last on the home page, as the mock-up's body style was. */
/* Homepage additions. Everything else on the page uses the Webflow
   stylesheet's own classes. Only what that stylesheet has no class for lives
   here: the benchmark charts and tables, the hero button, card grids for more
   than two cards, and body copy at 16px or more. Colours are the brand
   variables from sector7-starter.shared.css :root. */

.s7h-copy{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.s7h-copy p,.s7h-sub,.s7h-links .footer_link,.s7h-tools p,.s7h-layer p,.s7h-csub,.s7h-fine{font-size:1rem;line-height:1.6}
.s7h-copy p{color:var(--text--alternate)}
.s7h-copy p.text-color-white{color:var(--brand--secondary)}
.s7h-sub{color:var(--text--alternate)}
.s7h-sub a,.s7h-layer a{color:var(--text--primary);text-decoration:underline;text-decoration-color:var(--border--white-36);text-underline-offset:3px}
.s7h-sub a:hover,.s7h-layer a:hover{text-decoration-color:var(--brand--accent)}
/* Contrast: the site's secondary grey (#666) is 3.6:1 on the page background,
   below AA. On this page its text uses --text--alternate (#aaa) instead,
   covering the live "Over 1500 Projects / Since 1985" captions and the
   Services subtitle. The live alert's "Read More" goes up to 16px. */
.main-wrapper .text-color-secondary{color:var(--text--alternate)}
.cta-secondary_component .button-text.is-secondary{font-size:1rem}
/* The live Services card copy is 14px; lifted to the 16px body minimum. */
.main-wrapper .wrap-v-xsmall>p{font-size:1rem}

/* Link columns: the footer columns at body size, AA contrast. */
.s7h-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.s7h-links .footer-title{font-family:Ibmplexmono,monospace;font-size:1.125rem;color:var(--text--primary)}
.s7h-links .footer_link{color:var(--text--alternate)}
.s7h-links .footer_link:hover,.s7h-links .footer_link:focus-visible{color:var(--brand--accent)}
.s7h-links .wrap-v-regular{display:flex;flex-direction:column;gap:.75rem}
.s7h-actions{display:flex;justify-content:center;margin-top:3rem}

/* Tool cards: the live feature card, four in a 2 by 2 grid. */
.s7h-tools{grid-template-columns:1fr 1fr}
.s7h-tools .feature_card{height:auto}
.s7h-tools .heading-style-h5 .text-color-secondary{color:var(--text--alternate)}
.s7h-tools p.s7h-proof{color:var(--brand--secondary);margin-top:.25rem}

/* Linux layers: the feature card, four across. */
.s7h-layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.s7h-layer{padding:1.5rem;gap:.75rem;height:auto}
.s7h-bundles{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:3rem;text-align:center}
.s7h-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.s7h-pills .text-blocks:not(.highlighted){color:var(--text--alternate)}

/* Closing panel: the live CTA block, its heading sized for Jon's longer line. */
.s7v .section.cta .heading-style-special{font-size:3rem;max-width:34rem}
@media (max-width:767px){.s7v .section.cta .heading-style-special{font-size:2rem}}

/* Benchmark */
.s7h-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.s7h-stats .home-pricing_card{gap:1.5rem;padding:1.5rem;font-size:1rem}
.s7h-stats .home-pricing-title{min-height:4.2em}
.s7h-stats .home-pricing_bottom-wrapper{gap:.5rem;padding-right:.75rem}
.s7h-stats .home-pricing_bottom-wrapper>div:last-child{min-height:6.4em}
.s7h-stats .metric-text{white-space:nowrap;font-size:3rem;line-height:1.1}
.s7h-unit{font-size:.5em}
.s7h-charts{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
.s7h-chart,.s7h-chart figcaption{text-align:left}
.s7h-chart{margin:0;padding:1.5rem;border:1px solid var(--brand--lines);border-radius:24px;
  background-color:#0707093d;background-image:linear-gradient(#ffffff05,#fff0)}
.s7h-csub{color:var(--text--alternate);margin:.5rem 0 1rem}
.s7h-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:1rem;font-size:.875rem;color:var(--text--alternate)}
.s7h-legend span{display:inline-flex;align-items:center;gap:.5rem}
.s7h-sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.s7h-sw.rdb,.s7h-bar.rdb{background:var(--text--secondary)}
.s7h-sw.vx,.s7h-bar.vx{background:var(--brand--accent)}
.s7h-plot{position:relative;padding-bottom:1.75rem}
.s7h-row{position:relative;padding:.5rem 0}
.s7h-rlabel{font-size:.875rem;font-weight:600;color:var(--text--primary);margin-bottom:.25rem}
.s7h-rx{font-family:Ibmplexmono,monospace;font-weight:400;color:var(--brand--secondary);margin-left:.5rem}
/* Grid lines drawn per bar track, so they never cross the row labels. */
.s7h-track{display:flex;align-items:center;gap:.5rem;margin:0 4.5rem 0 0;padding:3px 0;
  background:linear-gradient(to right,var(--border--white-10) 1px,transparent 1px) 0 0 / calc(100% / var(--steps)) 100%;border-right:1px solid var(--border--white-10)}
.s7h-bar{display:block;flex:none;height:10px;min-width:2px;border-radius:0 3px 3px 0;width:calc(var(--v) / var(--max) * 100%)}
.s7h-val{background:var(--brand--background);padding:0 .25rem;font-family:Ibmplexmono,monospace;font-size:.875rem;color:var(--text--alternate);white-space:nowrap}
.s7h-axis{position:absolute;left:0;right:4.5rem;bottom:0;height:1.25rem}
.s7h-axis span{position:absolute;left:calc(var(--t) / var(--max) * 100%);transform:translateX(-50%);
  font-family:Ibmplexmono,monospace;font-size:.875rem;color:var(--text--alternate);white-space:nowrap}
.s7h-axis span:first-child{transform:none}

/* Full figures: the site's FAQ accordion, closed by default. */
.s7h-figures{margin-top:1.5rem}
.s7h-toggle{width:100%;background:none;border:0;color:var(--text--primary);text-align:left;font:inherit}
.s7h-toggle:focus-visible{outline:2px solid var(--brand--accent);outline-offset:-2px;border-radius:.75rem}
.s7h-toggle .faq5_icon-wrapper{width:1.5rem;height:1.5rem;flex:none}
.s7h-toggle .s7h-open,.s7h-toggle[aria-expanded="true"] .s7h-closed{display:none}
.s7h-toggle[aria-expanded="true"] .s7h-open{display:inline}
.s7h-tables{display:flex;flex-direction:column;gap:2.5rem;padding-bottom:1.5rem}
.s7h-table{width:100%;border-collapse:collapse;font-size:1rem}
.s7h-table caption{caption-side:top;text-align:left;color:var(--text--alternate);font-size:1rem;padding-bottom:.75rem}
.s7h-table th,.s7h-table td{padding:.625rem .75rem;text-align:left;border-bottom:1px solid var(--brand--lines);font-weight:400}
.s7h-table thead th{font-family:Ibmplexmono,monospace;font-size:.875rem;color:var(--text--alternate)}
.s7h-table tbody th{color:var(--text--primary)}
.s7h-table td{color:var(--text--primary);font-family:Ibmplexmono,monospace;font-variant-numeric:tabular-nums;text-align:right}
.s7h-table thead th:not(:first-child){text-align:right}
.s7h-table tr.s7h-total th,.s7h-table tr.s7h-total td{font-weight:700}
.s7h-fast{color:var(--brand--secondary)}
.s7h-fine{color:var(--text--alternate);font-size:1rem;line-height:1.6}

@media (max-width:991px){
  .s7h-layers,.s7h-stats,.s7h-links{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .s7h-tools,.s7h-layers,.s7h-stats{grid-template-columns:1fr}
  .s7h-chart{padding:1rem}
  .s7h-stats .home-pricing-title,.s7h-stats .home-pricing_bottom-wrapper>div:last-child{min-height:0}
  /* Phone: each row becomes a block of label and value pairs. */
  .s7h-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .s7h-table tr{display:block;padding:.75rem 0;border-bottom:1px solid var(--brand--lines)}
  .s7h-table tbody th,.s7h-table td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.2rem 0}
  .s7h-table tbody th{font-weight:600;padding-bottom:.4rem}
  .s7h-table td::before{content:attr(data-label);font-family:Notosans,sans-serif;color:var(--text--alternate);text-align:left}
}

/* Industries: the two tile rows drift in opposite directions (25vw out and back over 12 s each way) and the dash ring
   turns half a circle and back (8 s each way). Webflow ran these as page interactions; here they are CSS. */
@keyframes s7-drift{to{transform:translateX(-25vw)}}
@keyframes s7-drift-rev{to{transform:translateX(25vw)}}
@keyframes s7-turn{to{transform:rotate(180deg)}}
.carousel-row{animation:s7-drift 12s linear infinite alternate}
.carousel-row.reverse{animation-name:s7-drift-rev}
.circle-dash-border{animation:s7-turn 8s linear infinite alternate}
@media (prefers-reduced-motion:reduce){.carousel-row,.circle-dash-border{animation:none}}