/* Accessibility overrides preserve the supplied palette and primitive definitions.
   n500, green600/white and amber600/amber50 do not meet 4.5:1 for small text. */
.muted, .eyebrow { color:var(--n600); }
.btn-primary { background:var(--green700); border-color:var(--n200); }
.btn-primary:hover { background:var(--green900); border-color:var(--n300); }
body { overflow-x:clip; }
section { padding:0; }
.center { text-align:center; }
.display, .h2, .h3, .h4 { text-wrap:balance; }
.sub, .sub-sm, .over-copy .fine, .chart-sub, .chart-note { text-wrap:pretty; }
.over-copy .sub, .zone-box.center > .sub, .zone-box.center > .sub-sm { text-wrap:balance; }
.grid { display:grid; }
.ew-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ew-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid > *, .zone-box { min-width:0; }
.zone-box > p + p, .zone-box > h2 + p, .zone-box > h3 + p, .zone-box > .eyebrow + h2 { margin-top:16px; }
.zone-box > .btn { margin-top:24px; }
.zone-box.center > .sub, .zone-box.center > .sub-sm { max-width:720px; margin-left:auto; margin-right:auto; }
.ew-section-first { border-top:1px solid var(--line-solid); }
.marker-left { left:0; top:100%; }
.marker-right { left:100%; top:100%; }
.marker-top { top:0; bottom:auto; }
.marker-half, .marker-center { left:50%; top:100%; }
.marker-third { left:33.333%; top:100%; }
.marker-two-thirds { left:66.666%; top:100%; }
.grid.ew-grid-2, .grid.ew-grid-3 { position:relative; }
.grid > .marker-top { top:0; }
.ew-h-divider > .ew-marker { top:0; bottom:auto; }
.fine { font:400 11px/1.6 var(--font-mono); color:var(--n600); }
.fine a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.fine a:hover { color:var(--n900); }

/* Hero: full-height art, copy on the open paper at the top, dots bottom-centre. */
section.bleed { position:relative; width:100%; overflow:hidden; background:#efe9dc; touch-action:pan-y pinch-zoom; }
.bleed--hero::before { content:""; position:absolute; left:0; right:0; top:0; height:140px; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(239,233,220,.9), rgba(239,233,220,0)); }
.carousel .slides { position:relative; width:100%; }
.carousel .slide { position:absolute; inset:0; display:flex; align-items:flex-start; min-height:100svh; opacity:0; pointer-events:none; transition:opacity .6s; }
.carousel .slide.is-active { position:relative; opacity:1; pointer-events:auto; }
/* The art hangs from --art-top, anchored to its own top edge, so faces (about a third of the way down every image) clear the copy at any width; the viewport crops the feet, never the faces. */
section.bleed { --art-top:max(0px, calc(440px - 18.5vw)); }
.bleed-art { position:absolute; inset:var(--art-top) 0 0; -webkit-mask-image:linear-gradient(180deg,transparent,#000 140px); mask-image:linear-gradient(180deg,transparent,#000 140px); border:0; border-radius:0; background:transparent; aspect-ratio:auto; }
/* lazy art inside a display:none figure does not load: slides 2 and 3 wait for window load (site.js adds is-warm) */
.carousel:not(.is-warm) .slide:not(.is-active) .bleed-art { display:none; }
.bleed-art picture { display:block; width:100%; height:100%; }
.bleed-art img { width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; }
.bleed-scrim { display:none; }
.bleed .over { position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:96px 24px 132px; color:var(--n900); }
.over-copy { position:relative; max-width:1040px; margin:0 auto; padding:16px 40px; text-align:center; }
.over-copy::before { content:""; position:absolute; inset:-40px -80px; z-index:-1; border-radius:50%; background:radial-gradient(ellipse at center, rgba(239,233,220,.94) 0%, rgba(239,233,220,.86) 35%, rgba(239,233,220,.5) 62%, rgba(239,233,220,.15) 82%, rgba(239,233,220,0) 100%); filter:blur(18px); }
.over-copy .display { font-size:clamp(34px,4.2vw,58px); }
.over-copy .sub { max-width:680px; margin:20px auto 0; color:var(--n800); }
.over-copy .proof { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; color:var(--n900); font-weight:500; }
.over-copy .fine { margin-top:8px; color:var(--n700); }
/* the hero CTA carries the page; the review asked for it larger */
.btn-primary[href*="contact"] { height:50px; padding:0 26px; font-size:15.5px; }
.btn.btn-lg, .hero-actions .btn-primary { height:58px; padding:0 34px; font-size:17px; border-radius:10px; }
@media (max-width:700px) { .btn-primary[href*="contact"] { height:48px; font-size:15px; } .btn.btn-lg, .hero-actions .btn-primary { height:52px; padding:0 26px; font-size:16px; } }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
.carousel.is-ready .slide.is-active .over-copy { animation:carousel-copy-in .5s ease .6s both; }
@keyframes carousel-copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.carousel .over.carousel-control-wrap { position:absolute; inset:auto 0 0; z-index:3; display:flex; justify-content:center; padding:0 24px 20px; pointer-events:none; }
.carousel-controls { display:flex; align-items:center; gap:8px; padding:0 6px; border-radius:999px; background:rgba(239,233,220,.9); pointer-events:auto; }
.carousel .dots { display:flex; align-items:center; }
.carousel-dot { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; }
.carousel-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:rgba(28,27,24,.35); }
.carousel-dot.is-active::before { background:var(--n900); }
/* the progress span only clocks autoplay (site.js animates it); it is never shown */
.carousel-progress { position:absolute; width:0; height:0; visibility:hidden; }
.carousel-counter { display:none; }
.carousel:focus-visible { outline:2px solid var(--n900); outline-offset:-2px; }
.carousel-dot:focus, .carousel .btn:focus, .carousel-arrow:focus { outline:none; box-shadow:none; }
.carousel-arrow, .spk-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(28,27,24,.15); background:rgba(239,233,220,.85); color:var(--n900); cursor:pointer; transition:background-color .15s, opacity .15s; }
.carousel-arrow:hover { background:#efe9dc; }
.carousel-arrow svg, .spk-arrow svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.75; fill:none; }
.carousel-arrow--prev { left:24px; } .carousel-arrow--next { right:24px; }
/* parallax: art drifts a little with scroll; images are scaled so no edge shows */
.px-art { will-change:transform; transform:translate3d(0,var(--px,0px),0) scale(1.08); transform-origin:50% 0; transition:none; }

/* Shift Work Summit speakers */
.spk-wrap { position:relative; }
.spk-row { display:flex; gap:16px; margin:0; padding:32px; list-style:none; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:0 32px; scrollbar-width:none; }
.spk-row::-webkit-scrollbar { display:none; }
.spk-row:focus-visible { outline-offset:-4px; }
.spk { flex:none; width:260px; display:flex; flex-direction:column; padding:24px; background:#fff; border:1px solid var(--n200); border-radius:16px; scroll-snap-align:start; }
.spk-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.spk-faces { display:flex; flex:none; }
/* company marks: monotone PNGs (solid n900 on transparent), softened a step so the face leads */
.spk-logos { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; opacity:.78; }
.spk-logos img { display:block; width:auto; max-width:112px; object-fit:contain; }
.spk-faces img { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-sizing:content-box; margin:-2px; }
.spk-faces img + img { margin-left:-14px; }
.spk-name { font-weight:600; }
.spk .muted { font-size:14px; line-height:1.5; }
.spk .spk-session { margin:12px 0 20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; }
.spk .btn { margin-top:auto; align-self:flex-start; }
.spk-arrow { width:36px; height:36px; background:#fff; border-color:var(--n200); }
.spk-arrow:hover { border-color:var(--n900); }
.spk-arrow:disabled { opacity:0; pointer-events:none; }
.spk-arrow--prev { left:-18px; } .spk-arrow--next { right:-18px; }


/* What we do */
#what .display { font-size:clamp(34px,4.6vw,56px); }
#what .sub { margin-top:20px; }
#what .eyebrow + p { margin-top:12px; }
/* a mini product page: emblem + copy beside a live vignette, then the whole team */
.what-row { align-items:stretch; }
.what-copy { align-self:center; }
.what-copy .h3 { margin-top:12px; }
.what-copy .h3 + p { margin-top:12px; color:var(--n700); }
.what-visual { display:flex; align-items:center; justify-content:center; padding-top:40px; padding-bottom:40px; background:var(--n50); container-type:inline-size; }
.what-emblem { display:block; width:160px; height:160px; margin:-8px 0 12px -16px; }
.what-emblem.is-missing { visibility:hidden; }
.team-strip { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin:24px 0 8px; padding:0; list-style:none; }
.team-strip li { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px; color:var(--n700); }
.team-strip img { width:96px; height:96px; }
.team-strip a { display:flex; flex-direction:column; align-items:center; gap:4px; color:inherit; text-decoration:none; }
.team-strip a:hover { color:var(--n900); text-decoration:underline; }
@media (min-width:768px) { .what-row--flip > .what-copy { order:2; } }
.impact { display:flex; flex-direction:column; align-items:center; }
.impact > .muted { margin-top:12px; }
.cite { display:inline-flex; width:fit-content; max-width:100%; padding:2px 8px; border:1px solid var(--n200); border-radius:999px; color:var(--n500); font:400 11px/1.6 var(--font-mono); text-decoration:none; }
/* sourced claim on a hero slide: vendor mark + the line it supports */
.over-copy .cite-src { align-items:center; gap:7px; margin-top:20px; padding:5px 12px 5px 6px; border-color:var(--n300); border-radius:999px; background:rgba(255,255,255,.72); color:var(--n800); font-size:12px; text-decoration:none; }
.over-copy .cite-src img { width:16px; height:16px; border-radius:4px; flex:none; }
.over-copy .cite-src:hover { color:var(--n900); border-color:var(--n900); }
.over-copy .cite-src .cite-arrow { transition:transform .15s; }
.over-copy .cite-src:hover .cite-arrow { transform:translateX(3px); }
@media (max-width:700px) { .over-copy .cite-src { font-size:11px; text-align:left; line-height:1.4; align-items:flex-start; padding-top:7px; padding-bottom:7px; } .over-copy .cite-src img { margin-top:1px; } }
.cite-ht { align-items:center; gap:6px; padding:5px 12px; color:var(--n900); border-color:var(--n300); font-size:12px; }
.cite-ht img { width:14px; height:14px; display:block; }
.cite-ht .cite-arrow { display:inline-block; animation:cite-nudge 1.8s ease-in-out infinite; }
.cite-ht:hover { border-color:var(--n900); }
.cite-ht:hover .cite-arrow { animation:none; transform:translateX(3px); }
@keyframes cite-nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
button.cite-ht { background:#fff; cursor:pointer; }
.cite-ht.is-soon { color:var(--n500); border-style:dashed; }
.cite-ht.is-soon .cite-arrow { animation:none; transform:none; opacity:.5; }

/* Shift Reliability Report chart, restored from the pre-r5 homepage at the review's request */
.report-chart { width:100%; max-width:600px; margin:28px auto 0; }
/* Sourced data: marks use the chart palette; labels stay neutral. */
.chart { min-width:0; width:100%; }
.chart-title { margin:0; }
.chart-sub { margin-top:8px; }
.chart-svg { display:block; width:100%; height:auto; margin-top:24px; overflow:visible; }
.chart-svg text { font:400 12px var(--font-sans); fill:var(--n900); }
.chart-svg .chart-label { fill:var(--n500); }
.chart-svg .chart-value { fill:var(--n900); }
.chart-svg .chart-tick { font:400 11px var(--font-mono); fill:var(--n900); }
.chart-grid { stroke:var(--n100); stroke-width:1; }
.chart-axis { stroke:var(--n300); stroke-width:1; }
.chart-series { stroke-width:2; stroke-linejoin:round; stroke-linecap:round; fill:none; }
.chart-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:0; margin:16px 0 0; list-style:none; font-size:12px; line-height:1.5; color:var(--n500); }
.chart-legend > * { display:inline-flex; align-items:center; gap:6px; }
.legend-key { display:inline-block; width:16px; height:2px; flex:none; }
.cite:hover { color:var(--n900); }

.chart-svg .sp-ind { font:500 10px var(--font-sans); fill:var(--n800); }
.chart-svg .sp-met { font:400 8.5px var(--font-sans); fill:var(--n500); }
.sp-rail { stroke:var(--n100); stroke-width:14; stroke-linecap:round; }
.sp-band { stroke-width:14; stroke-linecap:round; }
.sp-a { stroke:var(--green500); } .sp-b { stroke:var(--green700); }
.sp-agg { stroke:#fff; stroke-width:2.5; }
.chart-svg .sp-aggv { font:500 7.2px var(--font-mono); fill:var(--n700); }
.chart-svg .sp-end { font:400 6.8px var(--font-mono); fill:var(--n500); }
.chart-svg .sp-tick { font:400 6.8px var(--font-mono); fill:var(--n400); }
/* the svg downscales to ~0.74 on a phone, so the user units go up to land at a readable size */
@media (max-width:700px) {
  .chart-svg .sp-ind { font-size:14px; } .chart-svg .sp-met { font-size:12px; }
  .chart-svg .sp-aggv { font-size:13px; } .chart-svg .sp-end, .chart-svg .sp-tick { font-size:12px; }
}
.chart-note { margin-top:14px; font-size:12px; line-height:1.5; text-align:center; }

/* Customers */
/* Two tiles, one grid row: each is a column whose quote takes the slack, so the mark, the person and the button sit on shared baselines whatever the quote lengths. */
.testimonial { display:flex; flex-direction:column; align-items:center; text-align:center; }
.quote { flex:1 0 auto; display:flex; align-items:center; max-width:720px; margin:0 auto; font-size:24px; line-height:1.4; font-weight:500; }
.quote-author { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.testimonial > .btn { margin-top:24px; }
.quote-author img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.quote-person { text-align:left; }
.quote-person > :first-child { font-weight:500; }
.quote-person .muted { margin-top:2px; }
#proof .testimonial > .logo-mono { display:flex; align-items:center; width:fit-content; height:24px; margin:32px auto 0; opacity:.78; }
#proof .testimonial > .logo-mono img { width:auto; height:20px; filter:none; }
.testimonial > .review-only { max-width:720px; margin:16px auto 0; }
.review-only { display:none; }

/* System tiles */
.connector-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 12px; margin-top:24px; }
.connector-item { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.connector-item .muted { font-size:12px; overflow-wrap:anywhere; }
.tile img { filter:none; }
.tile-custom { position:relative; border-style:dashed; }
.tile-custom::before, .tile-custom::after { content:''; display:block; position:absolute; width:14px; height:1px; background:var(--n600); }
.tile-custom::after { transform:rotate(90deg); }
.tile.is-missing img { display:none; }
.tile.is-missing::before { content:attr(data-letter); font:500 16px/1 var(--font-sans); color:var(--n600); }

/* Pricing, demo and footer */
.zone-list { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.zone-list li { display:flex; align-items:baseline; gap:12px; }
.zone-list .dot { align-self:center; }
#pricing .grid { align-items:center; }
#demo .zone-box { padding-top:96px; padding-bottom:96px; }
/* Closing art: lives in the footer, reaches up behind the demo block, and fades into the white page at its top. The demo copy and the footer text sit in front of it. */
#demo { position:relative; z-index:1; }
#demo .zone-box { padding-bottom:min(30vw,340px); }
.site-footer { position:relative; }
.site-footer > .container { position:relative; z-index:1; }
.closing-art { position:absolute; z-index:0; inset:auto 0 0; height:calc(100% + min(56vw,640px)); margin:0; background:#efe9dc; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent,#000 220px); mask-image:linear-gradient(180deg,transparent,#000 220px); }
/* two classes: the footer's logo rule (.site-footer img: 20px, blackened) must not reach the art */
.site-footer .closing-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 100%; filter:none; }
/* the footer line stays readable over the art's lower corners */
/* ::after, not ::before: same z-index as the art, so it must come later in the tree to paint over it */
.site-footer::after { content:""; position:absolute; inset:-64px 0 0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(239,233,220,0),rgba(239,233,220,.9) 50%); }
.site-footer .container { display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:end; padding:48px 24px; }
.footer-top { grid-column:1; display:flex; align-items:center; }
.site-footer img { display:block; width:auto; height:20px; filter:grayscale(1) brightness(0); }
.site-footer p { grid-column:1; margin-top:24px; color:var(--n700); }
.footer-links { grid-column:2; grid-row:1 / span 2; align-self:end; display:flex; flex-wrap:wrap; gap:24px; }

/* Missing art and review mode */
.art.is-missing { border:1px dashed var(--n300); }
.art.is-missing picture { visibility:hidden; }
.art.is-missing::after { content:attr(data-art); position:absolute; inset:0; display:grid; place-items:center; padding:16px; font:400 12px/1.5 var(--font-mono); color:var(--n600); }
html.review [data-confirm] { outline:2px dashed #eab308; outline-offset:4px; }
html.review .review-only { display:block; }

@media (min-width:768px) and (max-width:1023px) {
  #connectors .ew-grid-3 > .zone-box, #what .ew-grid-3 > .zone-box { padding-left:24px; padding-right:24px; }
}
@media (max-width:1023px) {
}
@media (max-width:767px) {
  .ew-grid-2, .ew-grid-3 { grid-template-columns:minmax(0,1fr); }
  .ew-section .ew-grid-2 > :not(.ew-marker) ~ :not(.ew-marker), .ew-section .ew-grid-3 > :not(.ew-marker) ~ :not(.ew-marker) { border-top:1px solid var(--line-solid); }
  .ew-marker { display:none; }
  .connector-grid { gap:24px; }
}
@media (max-width:700px) {
  section.bleed { --art-top:max(180px, calc(100svh - 170vw)); }
  .bleed .over { padding:80px 20px 108px; }
  .over-copy { max-width:none; padding:0; text-align:left; }
  .over-copy::before { display:none; }
  .over-copy .display { font-size:34px; }
  .over-copy .sub { font-size:16px; margin:16px 0 0; }
  .over-copy .proof { margin-top:16px; font-size:14px; }
  .hero-actions { margin-top:20px; }
  .over-copy .proof { justify-content:flex-start; align-items:baseline; }
  .over-copy .proof .dot { flex:none; transform:translateY(-2px); }
  .hero-actions { justify-content:flex-start; }
  .carousel-arrow, .spk-arrow { display:none; }
  .px-art { transform:none; }
  .what-emblem { width:120px; height:120px; margin-left:-12px; }
  .team-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .team-strip img { width:72px; height:72px; }
  .what-visual { padding:24px 16px; }
  .spk-row { padding:24px 20px; scroll-padding:0 20px; }
    #demo .zone-box { padding-top:64px; padding-bottom:48vw; }
  .closing-art { height:calc(100% + 90vw); }
  .site-footer .container { grid-template-columns:1fr; }
  .footer-links { grid-column:1; grid-row:auto; margin-top:16px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .carousel .slide.is-active .over-copy { opacity:1; transform:none; }
  .px-art { transform:none; }
}