/* 29Safety industry pages (construction and general industry, English and Spanish). Shared look in theme.css; the live
   examples, pricing rows, questions and the close come from home.css. This file is what these pages add. */

/* first screen: one photo, the words over the dark side of it (no diagonal: that belongs to the home page) */
.ihero{position:relative;min-height:700px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;background:#090E15}
.ihero .img{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 26s ease-in-out infinite alternate}
.ihero.con .img{background-image:url(/site/img/hero-site-sunset-r.webp);background-size:112% auto;background-position:0% 45%}
.ihero.gi .img{background-image:url(/site/img/hero-plant.webp);background-position:70% center}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08)}}
.ihero .shade{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 75% at 16% 80%,rgba(7,11,17,.82) 0%,rgba(7,11,17,.45) 50%,rgba(7,11,17,0) 80%),linear-gradient(90deg,rgba(7,11,17,.8) 0%,rgba(7,11,17,.45) 38%,rgba(7,11,17,.1) 70%),linear-gradient(0deg,rgba(7,11,17,.88) 0%,rgba(7,11,17,0) 42%),linear-gradient(180deg,rgba(7,11,17,.55) 0%,rgba(7,11,17,0) 20%)}
.ihero .tx{position:relative;z-index:2;width:100%;padding-block:120px 72px}
.ihero h1{font-size:clamp(42px,5.6vw,78px);font-weight:800;font-variation-settings:"wdth" 88;line-height:.98;max-width:13ch;letter-spacing:-.018em;text-shadow:0 2px 3px rgba(0,0,0,.6),0 8px 40px rgba(0,0,0,.7)}
.ihero .lede{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:30em;margin-top:22px;color:#F0F1ED;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 18px rgba(0,0,0,.85)}
.ihero .act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.ihero .act .ln{text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ihero .from{margin-top:18px;font-size:15px;color:#C9CDCA;max-width:40em}
.ihero .other{margin-top:8px;font-size:15px;color:#C9CDCA}
.ihero .other a{color:var(--text);font-weight:600;text-underline-offset:5px}
.ihero .tg{position:absolute;z-index:2;right:32px;bottom:26px;font-size:13.5px;font-weight:600;color:#E4E6E2;display:flex;align-items:center;gap:9px;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ihero .tg i{width:20px;height:3px;background:var(--ember);display:inline-block}

/* section heads used down the page */
.sec{padding-block:110px}
.sec.alt{border-top:1px solid rgba(255,255,255,.07)}
.sec.deep{background:radial-gradient(900px 420px at 85% 20%,rgba(242,107,29,.07),transparent 60%);border-block:1px solid rgba(255,255,255,.07)}
.shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
.shead h2{font-size:clamp(32px,3.8vw,52px);max-width:18ch}
.shead p{color:var(--muted);max-width:32em}

/* the two 30-second videos */
.watch-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;margin-top:44px;align-items:start}
.watch-side p{color:var(--soft)}
.watch-side .seg{margin-bottom:22px}
.watch-side .note{margin-top:18px;color:var(--muted);font-size:16px}
details.tr{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
details.tr summary{cursor:pointer;font-weight:600;font-size:16px;color:var(--text)}
details.tr p{margin-top:10px;color:var(--muted);font-size:15.5px}

/* why: three figures with their source under each */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px;border-top:1px solid var(--line);padding-top:34px}
.why .fig{font:760 clamp(48px,5vw,72px) var(--display);font-variation-settings:"wdth" 86;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.why p{margin-top:14px;color:var(--soft)}
.why small{display:block;margin-top:12px;color:var(--dim);font-size:13.5px;line-height:1.45}

/* how it works: a real sequence, so it's numbered */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:st}
.steps li{counter-increment:st;border-top:3px solid var(--ember);padding-top:22px}
.steps li::before{content:counter(st);display:block;font:800 44px var(--display);font-variation-settings:"wdth" 86;line-height:1;color:var(--ember)}
.steps h3{font-size:24px;margin-top:14px}
.steps p{margin-top:10px;color:var(--soft)}
.steps small{display:block;margin-top:12px;color:var(--dim);font-size:14px}

/* lockout (general industry): the words on one side, a placard on the other */
.loto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:44px;align-items:start}
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);color:var(--soft)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;border:solid var(--ember);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.cites{margin-top:16px;color:var(--dim);font-size:14px}
.placard{margin:0;background:var(--paper);color:#151515;border-radius:3px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);font-size:14px;line-height:1.35}
.placard .bar{height:14px;background:repeating-linear-gradient(-45deg,#C8102E 0 14px,#fff 14px 28px)}
.placard .phd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 18px 12px;border-bottom:2px solid #151515}
.placard .phd b{display:block;font:800 22px var(--display);font-variation-settings:"wdth" 90;color:#C8102E;line-height:1.05}
.placard .phd span{display:block;font-weight:700;font-size:16px;margin-top:4px}
.placard .phd em{font-style:normal;font-weight:700;font-size:13px;border:2px solid #151515;padding:3px 7px;white-space:nowrap}
.placard .cap{padding:8px 18px;font-weight:700;font-size:12.5px;background:#F1F1EE;border-bottom:1px solid #151515}
.placard ol{list-style:none;margin:0;padding:0}
.placard li{display:grid;grid-template-columns:28px 54px minmax(0,1fr) 78px;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid #C9C9C4}
.placard li .k{font:800 15px var(--display)}
.placard li .c{font:800 13px var(--display);background:#151515;color:#fff;text-align:center;padding:3px 0;border-radius:2px}
.placard li .c.e{background:#C8102E}
.placard li small{display:block;color:#555;font-size:12.5px;margin-top:2px}
.placard li .f{height:46px;border:1.5px dashed #9A9A94;display:grid;place-items:center;font-size:11px;color:#77776F;text-align:center;line-height:1.1}
.placard .verify{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #151515}
.placard .verify div{padding:10px 12px;font-weight:800;font-size:14px;border-right:1px solid #C9C9C4}
.placard .verify div:last-child{border-right:0}
.placard .verify span{color:#C8102E;margin-right:6px}
.placard .ldl{padding:9px 18px;background:#151515;color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}

/* what's in it */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:44px}
.feat > div{border-top:1px solid var(--line);padding-block:24px 26px}
.feat h3{font-size:22px}
.feat p{margin-top:10px;color:var(--soft);font-size:17px}
.feat small{display:block;margin-top:12px;color:var(--dim);font-size:13.5px}
.feat small b{color:var(--ember);font-weight:600}
.fnote{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;border-top:1px solid var(--line);padding-top:26px;color:var(--muted);font-size:16px}

/* Harli on the industry pages */
.hq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.hq-grid h2{font-size:clamp(72px,9vw,124px);font-variation-settings:"wdth" 84;line-height:.86;letter-spacing:-.02em}
.hq-grid .si{display:block;font:600 16px var(--body);color:var(--ember);margin-top:14px}
.hq-grid .lead{margin-top:20px;color:#E6E8E4;font-size:19px;max-width:28em}
.hq-asks{list-style:none;margin:0;padding:0}
.hq-asks li{border-top:1px solid var(--line);padding-block:18px}
.hq-asks li:last-child{border-bottom:1px solid var(--line)}
.hq-asks b{display:block;font-weight:650;font-size:15px;color:var(--muted)}
.hq-asks q{display:block;margin-top:6px;font:700 20px/1.3 var(--display);font-variation-settings:"wdth" 94;color:var(--text);quotes:"\201C" "\201D"}
.hq-asks p{margin-top:8px;color:var(--soft);font-size:16px}

/* services */
.svc{margin-top:44px;border-top:1px solid var(--line)}
.svc > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,.9fr);gap:28px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.svc h3{font-size:21px}
.svc p{color:var(--soft);font-size:16.5px}
.svc .pr{color:var(--text);font-weight:600;font-size:15.5px}
.svc .pr small{display:block;color:var(--dim);font-weight:500;font-size:14px;margin-top:4px}
.svc-foot{margin-top:20px;color:var(--muted);font-size:16px;max-width:60em}
.svc-foot p + p{margin-top:10px}
.svc-foot a{color:var(--text)}

/* the general industry video: until its files are rendered (or while the poster loads) the box shows the plant photo,
   not an empty black frame */
.vid.gi{background:#090E15 url(/site/img/hero-plant.webp) center/cover no-repeat}
.vid.gi video{background:transparent}

/* the close, with this page's two photos */
.close.con .a{background-image:url(/site/img/live-con-talk.webp)} .close.con .b{background-image:url(/site/img/live-con-trench.webp)}
.close.gi .a{background-image:url(/site/img/live-gi-lockout.webp)} .close.gi .b{background-image:url(/site/img/live-gi-guard.webp)}
.close .from{margin-top:16px;color:var(--muted);font-size:15px}

@media (max-width:1000px){
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ihero{min-height:0;align-items:stretch}
  .ihero .img{inset:0 0 auto 0;height:340px}
  .ihero.con .img{background-size:cover;background-position:68% 40%}
  .ihero .shade{background:linear-gradient(180deg,rgba(7,11,17,.55) 0px,rgba(7,11,17,.1) 90px,rgba(7,11,17,.25) 190px,rgba(9,13,20,.92) 300px,#090E15 340px)}
  .ihero .tx{padding-block:270px 56px}
  .ihero .tg{display:none}
  .sec{padding-block:72px}
  .shead,.watch-grid,.loto-grid,.hq-grid,.fnote{grid-template-columns:minmax(0,1fr);gap:24px}
  .why,.steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .feat{grid-template-columns:minmax(0,1fr)}
  .svc > div{grid-template-columns:minmax(0,1fr);gap:8px}
  .placard li{grid-template-columns:24px 46px minmax(0,1fr);}
  .placard li .f{display:none}
  .hq-grid h2{font-size:clamp(64px,20vw,96px)}
}
.loto-grid .lead-p{color:var(--soft)}
.why small a{color:var(--muted);text-underline-offset:3px}

/* Update 27: query-first headlines, the slogan as a kicker, ad-landing anchors */
.ihero .kick{font-size:clamp(15px,1.2vw,18px);font-weight:700;letter-spacing:.01em;color:#FFC29B;text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 18px rgba(0,0,0,.85);margin:0 0 14px}
.ihero h1.long{font-size:clamp(34px,4.4vw,60px);max-width:17ch;line-height:1.04}
section[id],.feat>div[id]{scroll-margin-top:84px}
.asks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.asks-foot{margin-top:28px;color:var(--muted);font-size:16px}
.asks-foot a{color:var(--text);font-weight:600;text-underline-offset:5px}
@media (max-width:860px){.asks-grid{grid-template-columns:minmax(0,1fr)}}
/* former style="" attributes on the pages (Nov 2026): three :not(#_) keep the standing an inline style had */
.sa-8515439:not(#_):not(#_):not(#_){margin-top:44px}
.sa-8b4ffd7:not(#_):not(#_):not(#_){font-size:clamp(32px,3.8vw,52px);max-width:20ch}
.sa-cfeda88:not(#_):not(#_):not(#_){font-size:clamp(32px,3.8vw,52px);max-width:18ch}
/* phones: the hero photo at 1200 pixels wide (shown about 620 CSS pixels wide there), the same idea as home.css */
@media (max-width:700px){.ihero.con .img{background-image:url(/site/img/hero-site-sunset-r-1200.webp)}.ihero.gi .img,.vid.gi{background-image:url(/site/img/hero-plant-1200.webp)}}
/* The "see inside" page: finished documents from the sample companies (Nov 2026) */
.tour-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;margin-top:32px}
.tour-fig{margin:0;min-width:0;display:flex;flex-direction:column;gap:16px}
.tour-fig a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.tour-fig img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;object-position:top center;background:#fff}
.tour-fig figcaption h3{margin:0 0 6px}
.tour-fig figcaption p{margin:0;color:var(--soft)}
.tour-fig figcaption ul{margin:10px 0 0;padding:0 0 0 18px;color:var(--soft)}
.tour-fig figcaption li{margin:4px 0}
@media (max-width:760px){.tour-grid{grid-template-columns:minmax(0,1fr);gap:32px}.tour-fig img{max-height:none}}
.tour-grid>.tour-fig:last-child:nth-child(odd){grid-column:1/-1}
.tour-grid>.tour-fig:last-child:nth-child(odd) figcaption{max-width:65ch}
/* Ad landing pages (content/site/pages, built by gen.py): the first phone screen holds the headline, a real screenshot of
   the finished document, the price line, the main button and two small links; the lede follows (Nov 2026). On wide
   screens the document stands to the right of the words. */
.ihero.lp .lp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);grid-template-rows:1fr repeat(9,auto);column-gap:64px}
.ihero.lp .lp-grid>*{grid-column:1}
.ihero.lp .kick{grid-row:2}
.ihero.lp h1{grid-row:3}
.ihero.lp .lp-note{grid-row:4}
.ihero.lp .lede{grid-row:5}
.ihero.lp .from{grid-row:6;margin-top:22px}
.ihero.lp .act{grid-row:7;margin-top:18px}
.ihero.lp .lp-pk{grid-row:8}
.ihero.lp .lp-cred{grid-row:9}
.ihero.lp .lp-more{grid-row:10}
.ihero.lp .lp-doc{grid-column:2;grid-row:1/-1;align-self:end;margin:0}
.ihero.lp .lp-doc img{display:block;width:100%;height:auto;border-radius:6px;background:#fff;box-shadow:0 22px 60px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.45)}
.ihero.lp .lp-note{margin-top:16px;font-size:15px;font-weight:600;color:#E4E6E2;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ihero.lp .lp-more{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:10px;font-size:15.5px}
.ihero.lp .lp-more .ln{text-shadow:0 1px 12px rgba(0,0,0,.8)}
/* Nov 4b: the free sample pack next to the trial button, then the $295 package and the credentials line */
.ihero.lp .act{gap:12px 14px}
.ihero.lp .act .btn.line{color:#F0F1ED;background:rgba(7,11,17,.45);box-shadow:inset 0 0 0 1.5px rgba(240,241,237,.62)}
.ihero.lp .act .btn.line:hover{box-shadow:inset 0 0 0 1.5px #F0F1ED;background:rgba(7,11,17,.6)}
.ihero.lp .lp-pk{margin-top:14px;font-size:15.5px;color:#E4E6E2;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ihero.lp .lp-pk a{color:var(--text);font-weight:700;text-underline-offset:5px;text-decoration-thickness:1.5px;white-space:nowrap}
.ihero.lp .lp-pk a:hover{text-decoration-color:var(--ember)}
.ihero.lp .lp-cred{margin-top:4px;font-size:14px;color:#C9CDCA;text-shadow:0 1px 10px rgba(0,0,0,.9)}
@media (max-width:860px){
  .ihero.lp .img{height:300px}
  /* the kicker and headline sit on the photo here: a deeper shade behind them so they read on any photo (4.5:1, Nov 2026) */
  .ihero.lp .shade{background:linear-gradient(180deg,rgba(7,11,17,.72) 0px,rgba(7,11,17,.6) 90px,rgba(7,11,17,.62) 190px,rgba(9,13,20,.92) 270px,#090E15 300px)}
  .ihero.lp .tx{padding-block:82px 36px}
  .ihero.lp .lp-grid{display:block}
  .ihero.lp .kick{font-size:14px;margin:0 0 6px}
  .ihero.lp h1.long{font-size:clamp(26px,7.2vw,34px);line-height:1.06;max-width:none}
  .ihero.lp .lp-note{margin-top:10px;font-size:14px}
  .ihero.lp .lp-doc{position:relative;margin-top:12px;height:min(150px,18vh);overflow:hidden;border-radius:6px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .ihero.lp .lp-doc img{height:100%;object-fit:cover;object-position:top;border-radius:0;box-shadow:none}
  .ihero.lp .lp-doc::after{content:"";position:absolute;inset:auto 0 0 0;height:36px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
  .ihero.lp .from{margin-top:12px;font-size:14px;line-height:1.45}
  .ihero.lp .act{margin-top:12px;gap:8px}
  .ihero.lp .act .btn{width:100%}
  .ihero.lp .act .btn.line{min-height:48px;padding-block:10px}
  .ihero.lp .lp-pk{margin-top:10px;font-size:14.5px;line-height:1.4}
  .ihero.lp .lp-cred{margin-top:4px;font-size:13px;line-height:1.4}
  .ihero.lp .lp-more{margin-top:4px;gap:0 18px;font-size:14.5px}
  .ihero.lp .lp-more .ln{min-height:44px}
  .ihero.lp .lede{margin-top:18px;font-size:16px}
}
/* the done-for-you packages as cards on a landing page (/inspection) */
.lpk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;align-items:stretch}
.lpk-card{display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.lpk-card:nth-child(2){border-color:rgba(242,107,29,.55);box-shadow:inset 0 3px 0 var(--ember)}
.lpk-card h3{font-size:22px;line-height:1.15}
.lpk-price{margin:0;font:800 38px/1 var(--display);font-variation-settings:"wdth" 90;color:var(--text);font-variant-numeric:tabular-nums}
.lpk-inc{list-style:none;margin:0;padding:0;flex:1;align-content:start}
.lpk-inc li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--line);color:var(--soft);font-size:15.5px;line-height:1.45}
.lpk-inc li:last-child{border-bottom:1px solid var(--line)}
.lpk-inc li small{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.45}
.lpk-inc li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;border-radius:2px;background:var(--ember)}
.lpk-card .btn{align-self:flex-start}
.lpk-cred{margin-top:22px;color:var(--soft);font-size:16px;font-weight:600}
@media (max-width:980px){.lpk-cards{grid-template-columns:minmax(0,1fr)}}
/* Phones (Nov 4b): the construction and general industry photo is a short band, and the lede follows the button, so the
   headline, the trial button, the price line and the sample pack fit on the first screen (iPhone 13). Computers and
   tablets are unchanged. */
@media (max-width:640px){
  .ihero:not(.lp) .img{height:176px}
  .ihero:not(.lp) .shade{background:linear-gradient(180deg,rgba(7,11,17,.55) 0px,rgba(7,11,17,.1) 70px,rgba(7,11,17,.3) 120px,rgba(9,13,20,.92) 160px,#090E15 176px)}
  .ihero:not(.lp) .tx{padding-block:164px 44px}
  .ihero:not(.lp) .tx .wrap{display:flex;flex-direction:column}
  .ihero:not(.lp) .kick{margin-bottom:10px}
  .ihero:not(.lp) .lede{order:1;margin-top:16px}
  .ihero:not(.lp) .act{margin-top:16px;gap:0 24px}
  .ihero:not(.lp) .act .btn{width:100%}
  .ihero:not(.lp) .from{margin-top:6px}
}