/* Subcontractor coverage, two ways to check in, and the FieldTie workmate. */
.point-signals { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.point-signals > span { padding:9px 13px; border:1px solid #d8d3e6; border-radius:30px; color:#584681; font-size:14px; }
.point-story > .section-description { max-width:450px; }
.point-steps p { font-size:16px; max-width:440px; }
.checkin-routes { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:60px; margin-top:60px; border-top:1px solid var(--line); }
.checkin-routes-heading { grid-column:1/-1; display:flex; justify-content:space-between; gap:40px; align-items:flex-start; margin-bottom:12px; }
.checkin-routes-heading > .eyebrow { padding-top:9px; color:#79768b; font-size:12px; }
.checkin-routes-heading h3 { font-size:clamp(32px,3.3vw,46px); font-weight:400; line-height:1.1; letter-spacing:-1.6px; }
.checkin-routes-heading h3 > span { color:#79728e; }
.route-card { padding:37px 36px; border-radius:24px; display:flex; flex-direction:column; align-items:flex-start; }
.route-app { background:#11123b; color:#fff; }
.route-web { background:#fff; border:1px solid #e0dfea; }
.route-label { font-size:12px; letter-spacing:1.2px; color:#9f97d8; }
.route-web .route-label { color:#6847d4; }
.route-card h4 { margin:22px 0 18px; font-size:34px; font-weight:400; letter-spacing:-1.2px; line-height:1.12; }
.route-card > p { font-size:16px; line-height:1.7; color:#b9bbd1; max-width:430px; }
.route-web > p { color:#73758a; }
.route-card ol { padding:0; margin:25px 0 30px; list-style:none; width:100%; }
.route-card li { display:flex; gap:16px; padding:14px 0; border-top:1px solid #ffffff21; font-size:16px; line-height:1.5; }
.route-card li > span { font-size:12px; color:#a199d8; padding-top:4px; }
.route-web li { border-color:#e5e3ee; }
.route-card .button { margin-top:auto; font-size:15px; min-height:48px; }
.route-app .button { background:#eeebff; color:#16133e; }
.route-web .button { color:#3f297d; border:1px solid #cdc5e5; background:#f7f5ff; }

/* A consistent illustrated workmate across a wider mix of field-service roles. */
.industry-heading { align-items:flex-end; margin-bottom:25px; }
.industry-heading .eyebrow { font-size:12px; color:#7e788b; letter-spacing:1px; }
.industry-heading h3 { font-size:37px; font-weight:400; letter-spacing:-1.25px; line-height:1.12; margin-top:13px; }
.industry-heading > span { font-size:14px; max-width:220px; text-align:right; line-height:1.6; }
.industry-grid { --role-gap:14px; display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:1fr; grid-auto-columns:calc((100% - 4 * var(--role-gap)) / 5); gap:var(--role-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.industry-grid::-webkit-scrollbar { display:none; }
.industry-grid:focus-visible { outline:2px solid var(--purple,#6847ff); outline-offset:5px; border-radius:18px; }
.industry-card { --role-bg:#edeafa; display:flex; flex-direction:column; aspect-ratio:auto; min-height:248px; padding:6px 6px 18px; scroll-snap-align:start; background:var(--role-bg); border-radius:20px; }
.industry-card:nth-child(4n+2) { --role-bg:#e5f3ee; }
.industry-card:nth-child(4n+3) { --role-bg:#f7e8e9; }
.industry-card:nth-child(4n+4) { --role-bg:#e8edf5; }
.industry-card > img { display:block; height:158px; width:100%; object-fit:contain; object-position:center; padding:2px; }
.industry-card:hover > img { transform:translateY(-4px) rotate(-2deg); }
.industry-card::after { display:none; }
.industry-card figcaption { position:relative; inset:auto; display:block; margin:0 12px; color:var(--navy); z-index:auto; }
.industry-card figcaption strong { font-weight:500; font-size:18px; letter-spacing:-.35px; line-height:1.15; overflow-wrap:anywhere; }
.industry-card figcaption div > span { font-size:14px; line-height:1.5; color:#727387; margin-top:5px; max-width:none; }
.industry-footer { display:flex; align-items:center; justify-content:flex-end; gap:20px; margin-top:18px; }
.industry-note { font-size:14px; margin:0; text-align:right; }
.coverage-crew { position:relative; display:flex; flex-direction:column; align-items:stretch; min-height:480px; padding:26px 27px; gap:20px; border-radius:24px; background:#eeeaf9; overflow:hidden; }
.coverage-crew > .coverage-team-image { display:block; width:100%; height:300px; object-fit:contain; margin:auto 0; }
.coverage-crew-label { color:#796a9c; font-size:12px; letter-spacing:.9px; }
.coverage-crew-caption { color:#62577b; font-size:16px; line-height:1.5; }

/* The demo uses explicit sample data; neither path requests device access. */
.demo-dialog { width:min(1040px,calc(100% - 40px)); }
.demo-layout { grid-template-columns:1.02fr 1fr; gap:40px; align-items:start; }
.demo-device-column { padding:20px 12px; }
.demo-phone { width:340px; max-width:100%; }
.demo-phone .phone-screen { min-height:610px; }
.demo-phone .phone-content { padding-inline:18px; padding-bottom:20px; }
.demo-story { padding:32px 0 0; }
.demo-bottom { align-items:flex-start; font-size:12px; }
.demo-bottom > span:first-child { max-width:420px; }
.demo-phone .app-site > span { font-size:12px; letter-spacing:.6px; }
.demo-phone .app-site > strong { font-size:25px; line-height:1.1; }
.demo-phone .app-site > small { display:block; font-size:14px; line-height:1.5; margin-top:8px; }
.demo-phone .app-hint { font-size:12px; line-height:1.55; }
.demo-phone .app-primary { font-size:14px; min-height:46px; justify-content:center; }
.demo-phone .app-back { font-size:14px; margin-top:7px; padding:10px; }
.demo-phone .app-detail-row { gap:12px; align-items:flex-start; font-size:13px; }
.demo-phone .app-detail-row > strong { max-width:165px; text-align:right; }
.entry-point { display:flex; justify-content:center; margin:13px 0 9px; }
.entry-point > img { width:154px; height:160px; object-fit:contain; }
.entry-choices { display:grid; gap:10px; margin-top:15px; }
.entry-choices > button { display:flex; align-items:center; gap:12px; padding:15px 12px; width:100%; border:1px solid #ddd7eb; background:#faf9fd; border-radius:13px; text-align:left; transition:background .2s,border-color .2s; }
.entry-choices > button:hover { background:#efebfb; border-color:#a48ddd; }
.entry-choice-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:10px; color:#6344be; background:#eae3fb; }
.entry-choice-icon .icon { width:20px; height:20px; }
.entry-choices strong { display:block; font-size:15px; font-weight:500; }
.entry-choices small { display:block; color:#77758a; font-size:12px; line-height:1.5; margin-top:3px; }
.scanner-view-clean { background:linear-gradient(145deg,#d9d4e8,#f1eff8 64%,#dad5e8); height:252px; }
.scanner-view-clean .scanner-tile { width:178px; height:190px; }
.scanner-view-clean .scanner-overlay { border-color:#fff; inset:24px 15px; }
.verification-list { margin:27px 0 24px; display:grid; gap:12px; }
.verification-row { display:flex; align-items:center; gap:11px; padding:16px 12px; border:1px solid #e2deea; border-radius:12px; }
.verification-icon { color:#856db6; display:grid; place-items:center; flex-shrink:0; }
.verification-icon .icon { width:23px; height:23px; }
.verification-row > span:nth-child(2) { min-width:0; }
.verification-row strong { display:block; font-size:14px; font-weight:500; }
.verification-row small { display:block; color:#838095; font-size:12px; line-height:1.5; margin-top:3px; }
.verification-state { margin-left:auto; color:#97909f; font-size:12px; flex-shrink:0; }
.verification-state .icon { width:19px; height:19px; }
.verification-row.is-verified { border-color:#c3e7d5; background:#f0f9f4; }
.is-verified .verification-icon,.is-verified .verification-state { color:#1a9b6c; }
.verification-explainer,.flow-body { font-size:14px; line-height:1.65; color:#747487; margin:20px 0; }
.flow-secondary { display:block; width:100%; min-height:44px; padding:11px 12px; border:1px solid #d8d2e9; border-radius:11px; margin-top:11px; color:#6948ad; font-size:14px; line-height:1.5; background:#fbfaff; }
.flow-secondary:hover { background:#eee8fa; }
.demo-phone .app-form-label { font-size:14px; line-height:1.5; margin-top:23px; }
.demo-phone .app-input { font-size:16px; padding:13px 12px; height:auto; min-height:48px; border:1px solid #d4cfdf; }
.demo-phone .app-input[aria-invalid=true] { border-color:#d8485c; }
.demo-phone .app-input:focus { border-color:#7555d4; outline:2px solid #a38ae552; outline-offset:2px; }
.demo-phone .form-error { font-size:13px; margin-bottom:14px; }
.otp-input { letter-spacing:7px; text-align:center; }
.demo-code { margin-top:15px; padding:12px 15px; border-radius:10px; background:#eeebf7; display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#75628f; }
.demo-code > strong { letter-spacing:2px; color:#56328d; font-size:15px; }
.licence-example { background:#f4f1fb; border:1px solid #ded8ed; border-radius:14px; padding:18px; margin-top:24px; position:relative; overflow:hidden; }
.licence-label { font-size:12px; letter-spacing:.5px; color:#796598; }
.licence-body { display:flex; align-items:center; gap:15px; margin:19px 0 12px; }
.licence-avatar { width:56px; height:64px; background:#e5ddef; display:grid; place-items:center; color:#9678b5; border-radius:8px; flex-shrink:0; }
.licence-avatar > .icon { width:33px; height:33px; }
.licence-body strong { display:block; font-size:19px; font-weight:500; }
.licence-body div > span { display:block; font-size:13px; color:#726685; margin-top:8px; }
.licence-body small { display:block; font-size:12px; color:#958ca1; margin-top:4px; }
.licence-scan-line { display:block; height:2px; background:#9876de; margin-top:15px; }
.contractor-match { margin:25px 0; border:1px solid #d4cce8; background:#f5f1fc; border-radius:13px; padding:19px 15px; }
.match-label { font-size:12px; color:#8b71b3; letter-spacing:.6px; }
.contractor-match > strong { display:block; font-size:18px; line-height:1.3; margin-top:11px; font-weight:500; }
.contractor-match > p { font-size:13px; color:#80708f; margin-top:8px; }
.contractor-results { display:grid; gap:9px; margin-top:14px; }
.contractor-results > button { text-align:left; border:1px solid #ded8e8; border-radius:11px; padding:14px 12px; background:#fbfaff; }
.contractor-results > button:hover { border-color:#a592c6; background:#f0eaf8; }
.contractor-results strong { display:block; font-size:14px; font-weight:500; }
.contractor-results span { display:block; font-size:12px; line-height:1.45; margin-top:5px; color:#8a8099; }
.join-summary { margin:22px 0; display:grid; gap:12px; }
.join-summary .verification-state { display:none; }
.install-preview { margin:24px 0; border:1px solid #ded8ed; border-radius:16px; padding:22px; display:flex; flex-direction:column; align-items:center; background:#f6f2fd; }
.install-preview > img { width:54px; height:59px; margin-bottom:13px; }
.install-preview > strong { font-size:21px; font-weight:500; }
.install-preview > span { font-size:13px; color:#867498; margin-top:5px; }
.shift-details { margin-top:25px; }
.checkin-evidence { margin:22px 0; padding:12px; background:#ebf6ef; border-radius:11px; display:grid; gap:9px; }
.checkin-evidence > span { display:flex; gap:8px; align-items:center; color:#318061; font-size:13px; }
.checkin-evidence .icon { width:17px; height:17px; }
.demo-phone .app-success-check { margin:26px auto; }

@media (max-width:1200px) {
 .industry-grid { --role-gap:12px; }
 .industry-card { padding-inline:3px; min-height:244px; }
 .industry-card > img { height:148px; }
 .industry-card figcaption strong { font-size:17px; }
 .route-card { padding:30px; }
 .coverage-crew { min-height:420px; }
 .coverage-crew > .coverage-team-image { height:260px; }
}
@media (max-width:1000px) {
 .industry-grid { grid-auto-columns:calc((100% - 2 * var(--role-gap)) / 3); }
 .industry-card figcaption strong { font-size:18px; }
 .industry-footer { flex-wrap:wrap; gap:14px; }
 .checkin-routes-heading { display:block; }
 .checkin-routes-heading > .eyebrow { margin-bottom:22px; }
 .route-card { padding:28px; }
 .route-card h4 { font-size:31px; }
 .coverage-crew { min-height:400px; }
 .demo-layout { gap:25px; }
}
@media (max-width:760px) {
 .checkin-routes { display:flex; flex-direction:column; gap:18px; padding-top:39px; margin-top:42px; }
 .checkin-routes-heading { margin-bottom:8px; }
 .checkin-routes-heading h3 { font-size:34px; letter-spacing:-1px; }
 .route-card { padding:28px 24px; border-radius:20px; }
 .route-card h4 { font-size:32px; }
 .point-story > .section-description { max-width:none; }
 .point-steps p { font-size:16px; }
 .point-signals { margin-top:20px; }
 .industry-heading { display:block; }
 .industry-heading h3 { font-size:31px; }
 .industry-heading > span { display:block; text-align:left; max-width:none; margin-top:13px; }
 .industry-grid { grid-auto-columns:calc((100% - var(--role-gap)) / 2); scroll-snap-type:x proximity; }
 .industry-card { border-radius:16px; min-height:236px; padding:4px 3px 16px; }
 .industry-card > img { height:146px; }
 .industry-card figcaption { margin-inline:11px; }
 .industry-card figcaption strong { font-size:18px; }
 .industry-card figcaption div > span { font-size:14px; }
 .industry-footer { justify-content:center; }
 .industry-note { text-align:center; }
 .coverage-crew { min-height:350px; padding:22px 20px; gap:18px; }
 .coverage-crew > .coverage-team-image { height:230px; }
 .coverage-crew-label { font-size:12px; }
 .coverage-crew-caption { font-size:14px; }
 .demo-dialog { width:calc(100% - 20px); }
 .demo-layout { display:flex; gap:18px; }
 .demo-device-column { padding:18px 5px; }
 .demo-phone { width:324px; }
 .demo-story { padding-top:5px; }
 .demo-bottom { font-size:12px; }
 .demo-phone .phone-content { padding-inline:15px; }
 .demo-phone .app-site > strong { font-size:24px; }
 .entry-choices > button { padding:14px 10px; }
}
@media (max-width:360px) {
 .industry-card { min-height:236px; }
 .industry-card > img { height:136px; }
 .industry-card figcaption { margin-inline:10px; }
 .industry-card figcaption strong { font-size:17px; }
 .industry-card figcaption div > span { font-size:14px; }
 .demo-shell { padding:15px 10px; }
 .demo-device-column { padding:16px 2px; }
 .demo-phone .phone-content { padding-inline:12px; }
 .verification-row { gap:8px; padding-inline:9px; }
 .entry-choice-icon { width:28px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
 .industry-card > img,.entry-choices > button { transition:none; }
 .industry-card:hover > img { transform:none; }
}