/* 29Safety home page (29safety.com and /es). Shared look in theme.css; this file is only what the home page adds.
   The JHA is the centerpiece; the editions section plays short live examples; the first screen splits jobsite from
   plant floor with the site's one diagonal. */

/* hero: jobsite on the left, plant floor on the right. The seam starts high on the right and runs down to the left,
   just clear of the words; home.js measures the text and places it. */
@property --rv{syntax:'<number>';inherits:false;initial-value:1}
.hero{position:relative;min-height:780px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;background:#090E15}
.hero .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.78) saturate(.9)}
.hero .a{background-image:url(/site/img/hero-site-sunset.webp);background-size:118% auto;background-position:62% 40%;filter:brightness(.85) saturate(1)}
.hero .b{--x0:72%;--x1:44%;background-image:url(/site/img/hero-plant.webp);background-position:70% center;clip-path:polygon(calc(var(--x0) + (100% - var(--x0)) * (1 - var(--rv))) 0,100% 0,100% 100%,calc(var(--x1) + (100% - var(--x1)) * (1 - var(--rv))) 100%)}
.hero:not(.ready) .b{--rv:0}
.hero.ready .b{animation:reveal 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes reveal{from{--rv:0}to{--rv:1}}
.hero .seam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0}
.hero.ready .seam{opacity:1;animation:fadein 1s .7s ease both}
.hero .seam line{vector-effect:non-scaling-stroke;fill:none}
.hero .seam .under{stroke:rgba(0,0,0,.5);stroke-width:16}
.hero .seam .glow{stroke:rgba(255,128,52,.55);stroke-width:14;filter:blur(7px)}
.hero .seam .core{stroke:#FF7A2E;stroke-width:5}
.hero .seam .m{display:none}
.hero .shade{position:absolute;inset:0;z-index:1;background:
  radial-gradient(70% 80% at 18% 78%,rgba(7,11,17,.82) 0%,rgba(7,11,17,.5) 45%,rgba(7,11,17,0) 75%),
  linear-gradient(90deg,rgba(7,11,17,.86) 0%,rgba(7,11,17,.62) 34%,rgba(7,11,17,.22) 60%,rgba(7,11,17,.12) 100%),
  linear-gradient(0deg,rgba(7,11,17,.9) 0%,rgba(7,11,17,0) 48%),
  linear-gradient(180deg,rgba(7,11,17,.7) 0%,rgba(7,11,17,0) 22%)}
.hero .slow{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero .tx{position:relative;z-index:3;width:100%;padding-block:150px 84px}
.hero h1{font-size:clamp(44px,6.2vw,86px);font-weight:800;font-variation-settings:"wdth" 88;line-height:.98;max-width:15ch;letter-spacing:-.018em;
  text-shadow:0 1px 2px rgba(0,0,0,.65),0 6px 36px rgba(0,0,0,.6)}
.hero .lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:26em;text-wrap:pretty;margin-top:24px;color:#F0F1ED;font-weight:500;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hero .act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px}
.hero .act .ln{text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero .from{margin-top:20px;font-size:15px;color:#C9CDCA;max-width:36em}   /* two short lines: the seam between the photos hugs the widest text (home.js) */
.hero .tg{position:absolute;z-index:3;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);animation:fadein .8s 1.2s ease both}
.hero .tg i{width:20px;height:3px;background:var(--ember);display:inline-block}
.hero .tg1{right:calc(58% + 24px)} .hero .tg2{left:calc(42% + 24px)}

/* the three samples (each opens its own page: /examples/…) and the sample-pack form under them */
.smp-sec{padding-block:120px 70px}
.smp-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.smp-head h2{font-size:clamp(36px,4.4vw,60px)}
.smp-head p{color:var(--muted);max-width:30em}
.smp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.smp-card{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.smp-card:hover{border-color:var(--ember);transform:translateY(-2px)}
.smp-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;background:var(--paper);border-bottom:1px solid var(--line)}
.smp-card div{padding:18px 20px 20px}
.smp-card b{display:block;font:720 22px/1.15 var(--display);font-variation-settings:"wdth" 96}
.smp-card span{display:block;color:var(--muted);font-size:16px;line-height:1.45;margin-top:8px}

/* live risk */

/* editions, with live examples that fade from one to the next */
.ed{padding-block:120px}
.ed-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.ed-head h2{font-size:clamp(34px,4vw,54px);max-width:14ch}
.ed-head p{color:var(--muted);max-width:26em}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-top:40px}
.tabs button{flex:1;background:none;border:0;color:var(--dim);font:720 clamp(22px,2.4vw,32px) var(--display);font-variation-settings:"wdth" 92;text-align:left;padding:18px 0 16px;cursor:pointer;position:relative}
.tabs button small{display:block;font:500 14px var(--body);color:var(--dim);margin-top:4px}
.tabs button[aria-selected="true"]{color:var(--text)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ed-body{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr);gap:48px;margin-top:40px;align-items:start}
.live{position:relative}
.slides{display:grid;border-radius:6px;overflow:hidden;background:#090E15;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07)}
.sl{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.sl.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.pic{position:relative;aspect-ratio:3/2;overflow:hidden}
.pic .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.sl.go .ph{animation:kb 10s ease-out both}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.07)}}
.live-tag{position:absolute;z-index:3;left:16px;top:16px;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-line);border-radius:3px;padding:5px 10px;font:700 12.5px var(--body);letter-spacing:.06em;color:#fff;pointer-events:none}
.live-tag i{display:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,56,59,.6)}100%{box-shadow:0 0 0 9px rgba(229,56,59,0)}}
.live.paused .live-tag i{animation-play-state:paused;opacity:.5}
.pin{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;translate:-15px -15px}
.pin.lf{flex-direction:row-reverse;translate:calc(-100% + 15px) -15px}
.pin b{min-width:30px;height:30px;padding:0 7px;border-radius:15px;display:grid;place-items:center;font:800 13.5px var(--display);background:var(--ember);color:var(--ember-ink);box-shadow:0 0 0 4px rgba(242,107,29,.22),0 6px 16px rgba(0,0,0,.55)}
.pin.lock b{background:var(--crit);color:#fff;box-shadow:0 0 0 4px rgba(179,18,31,.28),0 6px 16px rgba(0,0,0,.55)}
.pin span{background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--glass-line);padding:7px 11px;border-radius:4px;font-size:14px;line-height:1.3;width:max-content;max-width:240px;color:var(--text)}
.pin em{display:block;font-style:normal;font-weight:700;font-size:13px;color:#FFB088;margin-top:2px}
.pin.lock em{color:#FF8A8F}
.sl.go .pin{animation:pinin .5s var(--d) both}
.sl.go .pin b{animation:pindone .35s var(--d2) both}
.sl.go .pin em{animation:fadein .35s var(--d2) both}
@keyframes pinin{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes pindone{from{background:rgba(12,15,17,.7);color:#fff;box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.55)}}
.strip{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--glass-line);border-radius:4px;padding:10px 14px;font-size:14px;line-height:1.4;color:var(--soft)}
.strip b{color:#fff}
.sl.go .strip{animation:fadein .5s var(--d) both}
.pnl{position:absolute;z-index:2;top:58px;width:min(46%,370px);background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-line);border-radius:6px;padding:16px 18px 14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.pnl.r{right:16px} .pnl.l{left:16px}
.pnl.legend{display:none}
.pt{font:740 19px/1.2 var(--display);font-variation-settings:"wdth" 94}
.ps{font-size:13px;line-height:1.4;color:var(--muted);margin-top:3px}
.rows{list-style:none;margin:10px 0 0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto 18px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14.5px;line-height:1.3}
.rows small{color:var(--muted);font-size:12.5px}
.rows time{font-variant-numeric:tabular-nums;color:var(--soft);font-size:13px;white-space:nowrap}
.rows i{width:18px;height:18px;border-radius:50%;background:var(--low);position:relative}
.rows i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rows li.warn time{color:var(--med);font-weight:700}
.rows li.warn i{background:var(--med)} .rows li.warn i::after{content:"!";left:0;top:0;width:100%;height:100%;border:0;transform:none;display:grid;place-items:center;font:800 12px/1 var(--display);color:#151515}
.rows .n{min-width:24px;height:22px;padding:0 5px;border-radius:11px;display:grid;place-items:center;font:800 12px var(--display);background:var(--ember);color:var(--ember-ink)}
.rows li.ln4{grid-template-columns:auto minmax(0,1fr) auto}
.pf{margin-top:10px;font-size:13.5px;line-height:1.45;color:#E6E8E4}
.pf.alert{border-left:3px solid var(--med);padding-left:10px}
.sl.go .rows li{animation:rowin .4s var(--d) both}
.sl.go .rows i{animation:tick .3s var(--d2) both}
.sl.go .pf{animation:fadein .5s var(--d) both}
@keyframes rowin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes tick{from{transform:scale(0)}to{transform:scale(1)}}
.live.paused .sl *,.live.paused .sl,.live.paused .bar i{animation-play-state:paused !important}
.live-nav{display:flex;gap:14px;align-items:flex-start;margin-top:14px}
.live-nav .segs{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.segb{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--dim)}
.segb .bar{display:block;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.segb .bar i{display:block;height:100%;width:0;background:var(--ember)}
.segb.done .bar i{width:100%;background:#4A5A70}
.segb.on .bar i{width:100%}
.segb.on .bar i.run{animation:fill linear both}
@keyframes fill{from{width:0}to{width:100%}}
.segb .lb{display:block;margin-top:8px;font-size:14.5px;font-weight:600;line-height:1.3}
.segb.on .lb{color:var(--text)}
.pp{flex:none;width:36px;height:36px;margin-top:-8px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
.pp svg{width:14px;height:14px}
.list{list-style:none;margin:0;padding:0}
.list li{position:relative;padding:15px 0 15px 18px;border-bottom:1px solid var(--line);font-size:18px;line-height:1.45;color:#C9CDCA;transition:color .3s ease}
.list li:first-child{border-top:1px solid var(--line)}
.list li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--ember);transform:scaleY(0);transition:transform .35s ease}
.list li.now{color:#fff} .list li.now::before{transform:scaleY(1)}
.list button{all:unset;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(242,107,29,.55);text-underline-offset:5px;text-decoration-thickness:1.5px}
.list button:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.ed-note{margin-top:20px;color:var(--muted);font-size:16px}
.ed-more{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:16px}

/* Harli */
.harli{padding-block:130px;background:radial-gradient(900px 420px at 85% 20%,rgba(242,107,29,.08),transparent 60%);border-block:1px solid rgba(255,255,255,.07)}
.harli-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.harli h2{font-size:clamp(84px,11vw,150px);font-variation-settings:"wdth" 84;line-height:.85;letter-spacing:-.02em}
.harli .si{display:block;font:600 16px var(--body);color:var(--ember);margin-top:16px}
.harli .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:#E6E8E4;margin-top:22px;max-width:24em}
.harli .disc{margin-top:22px;font-size:15px;color:var(--muted);max-width:30em}
.vid{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);background:#000}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
/* .vid clips anything outside it (overflow:hidden), so the keyboard focus ring sits just inside the video */
.vid video:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.vid-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;font-size:14px;color:var(--dim);flex-wrap:wrap}

/* pricing */
.price{padding-block:120px}
.price-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.price-head h2{font-size:clamp(34px,4vw,54px)}
.price-head p{color:var(--muted)}
.calc{margin-top:44px;background:rgba(18,28,44,.55);border:1px solid rgba(120,150,200,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:6px;padding:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.calc label{font-weight:600;font-size:17px;display:block}
.calc .n{font:760 64px var(--display);font-variation-settings:"wdth" 88;font-variant-numeric:tabular-nums;line-height:1;margin-top:8px}
.calc input[type=range]{width:100%;margin-top:18px;accent-color:var(--ember);height:28px}
.calc .scale{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
.pick .plan{font:760 34px var(--display);font-variation-settings:"wdth" 90}
.pick .cost{font:760 72px var(--display);font-variation-settings:"wdth" 84;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.pick .cost small{font:500 17px var(--body);color:var(--muted)}
.pick .yr{color:var(--muted);margin-top:8px}
.pick .btn{margin-top:22px}
.plans{margin-top:30px;border-top:1px solid var(--line)}
.plans .row{display:grid;grid-template-columns:140px 150px 170px minmax(0,1fr) 250px;gap:18px;padding:20px 14px;border-bottom:1px solid var(--line);align-items:baseline;transition:background .3s ease,color .3s ease;border-radius:4px}
.plans .nm{font:740 26px var(--display);font-variation-settings:"wdth" 90}
.plans .wk{color:var(--muted);font-size:16px}
.plans .pr{font:740 26px var(--display);font-variant-numeric:tabular-nums}
.plans .pr small{font:500 14px var(--body);color:var(--dim)}
.plans .pr em{display:block;margin-top:3px;font:500 13px/1.3 var(--body);font-style:normal;color:var(--dim)}
.plans .ad{color:var(--soft);font-size:16px}
.plans .go{display:grid;gap:6px;justify-items:start}
.plans .go a{font-size:16px;font-weight:700;color:var(--text);text-underline-offset:5px;text-decoration-thickness:1.5px}
.plans .go small{font-size:13.5px;line-height:1.4;color:var(--muted)}
.plans .row.on{background:rgba(26,44,74,.75);border-bottom-color:rgba(26,44,74,.75)}
.plans .row.on,.plans .row.on .wk,.plans .row.on .pr small,.plans .row.on .ad,.plans .row.on .go a{color:var(--ember)}
.fine{margin-top:18px;color:var(--dim);font-size:15px}
/* monthly or yearly; the trial terms sit right under the plans, before anyone reaches the card form */
.bill{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.pick .tline{margin-top:10px;font-size:14.5px;color:var(--muted);max-width:30em}
.terms{margin-top:26px;padding:20px 22px;border:1px solid rgba(120,150,200,.25);border-radius:6px;background:rgba(18,28,44,.55)}
.terms h3{font-size:20px}
.terms p{margin-top:8px;color:var(--soft);font-size:16px;max-width:54em}
/* time with the 29Safety safety team, in short (the full list is on the industry pages) */
.svc-mini{margin-top:44px;border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px 40px;align-items:start}
.svc-mini h3{font-size:24px}
.svc-mini p{color:var(--soft)}
.svc-mini .svc-links{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 26px}

/* questions and the close */
.faq{padding-block:110px;border-top:1px solid rgba(255,255,255,.07)}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px}
.faq h2{font-size:clamp(32px,3.4vw,46px)}
.faq .ask{color:var(--muted);margin-top:16px;font-size:16px}
.faq .ask span{color:var(--text);user-select:all}
.faq .ask a{color:var(--text)}
.close{position:relative;overflow:hidden;isolation:isolate;padding-block:130px;background:var(--deep)}
.close .img{position:absolute;inset:0;background-size:cover;background-position:center}
.close .a{background-image:url(/site/img/live-con-talk.webp);opacity:.6;animation:xa 16s ease-in-out infinite}
.close .b{background-image:url(/site/img/live-gi-guard.webp);opacity:0;animation:xb 16s ease-in-out infinite}
@keyframes xa{0%,40%{opacity:.6}50%,90%{opacity:0}100%{opacity:.6}}
@keyframes xb{0%,40%{opacity:0}50%,90%{opacity:.6}100%{opacity:0}}
.close .shade{position:absolute;inset:0;background:linear-gradient(90deg,#07090C 18%,rgba(7,9,12,.72) 55%,rgba(7,9,12,.35))}
.close .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(36px,4.6vw,62px);max-width:17ch;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.close p{color:var(--soft);margin-top:16px;max-width:30em}
.close .act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:28px}

@media (min-width:861px){
  .hero .shade{background:radial-gradient(46% 60% at 14% 82%,rgba(7,11,17,.7) 0%,rgba(7,11,17,.3) 55%,rgba(7,11,17,0) 80%),linear-gradient(90deg,rgba(7,11,17,.62) 0%,rgba(7,11,17,.3) 30%,rgba(7,11,17,.06) 56%,rgba(7,11,17,0) 100%),linear-gradient(0deg,rgba(7,11,17,.85) 0%,rgba(7,11,17,0) 36%),linear-gradient(180deg,rgba(7,11,17,.6) 0%,rgba(7,11,17,0) 16%)}
  .hero h1{text-shadow:0 2px 3px rgba(0,0,0,.7),0 8px 40px rgba(0,0,0,.75)}
  .hero .lede{text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 18px rgba(0,0,0,.85)}
}
@media (max-width:1100px){
  .plans .row{grid-template-columns:170px 100px 130px minmax(0,1fr)}
  .plans .go{grid-column:1/-1}
}
@media (max-width:860px){
  .hero{min-height:0;align-items:stretch}
  .hero .img,.hero .seam{inset:0 0 auto 0;height:330px}
  .hero .a{background-size:auto 128%;background-position:47% 62%}
  .hero .b{--x0:66%;--x1:34%;background-size:auto 112%;background-position:16% 40%}
  .hero .a,.hero .b{background-repeat:no-repeat}
  .hero .seam .d{display:none} .hero .seam .m{display:inline}
  .hero .shade{background:linear-gradient(180deg,rgba(7,11,18,.75) 0px,rgba(7,11,18,0) 90px,rgba(7,11,18,0) 230px,rgba(7,11,18,.92) 318px,#090E15 330px)}
  .hero .tx{padding-block:338px 52px}
  .hero .seam{z-index:1}
  .hero .tg{display:flex;top:282px;bottom:auto;font-size:14px;font-weight:700;color:#fff;gap:8px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.9)}
  .hero .tg i{width:18px;background:#FF7A2E}
  .hero .tg1{left:16px;right:auto} .hero .tg2{right:16px;left:auto}
  .hero h1{font-size:clamp(34px,8.7vw,52px);line-height:1.1;max-width:none;font-variation-settings:"wdth" 92}
  .hero .lede{font-size:17px;margin-top:10px;color:#C9D3E0;font-weight:400}
  .hero .act{margin-top:18px;gap:2px}
  .hero .act .btn{width:100%;min-height:56px;font-size:18px;font-weight:800;border-radius:14px}
  .hero .from{margin-top:6px;font-size:16px;color:#C9D3E0}
  .bill .seg button{min-height:48px}
  .svc-mini{grid-template-columns:minmax(0,1fr)} .svc-mini .svc-links{grid-column:1}
  .plans .go{margin-top:8px}
  .smp-cards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
  .smp-card{flex-direction:row;align-items:stretch}
  .smp-card img{width:38%;flex:none;aspect-ratio:auto;height:auto;min-height:128px;border-bottom:0;border-right:1px solid var(--line)}
  .smp-card div{padding:14px 14px 16px;min-width:0}
  .smp-card b{font-size:19px}
  .smp-card span{font-size:15px;margin-top:6px}
  .smp-sec,.ed,.harli,.price,.faq,.close{padding-block:76px}
  .smp-head,.ed-body,.harli-grid,.price-head,.faq-grid,.calc{grid-template-columns:minmax(0,1fr);gap:28px}
  .pic{aspect-ratio:16/10}
  .pin span,.strip{display:none}
  .pin b{min-width:26px;height:26px;font-size:12px}
  .pnl,.pnl.r,.pnl.l{position:relative;inset:auto;top:auto;width:auto;margin:0;border-radius:0;border-width:1px 0 0;box-shadow:none;background:var(--panel);backdrop-filter:none}
  .pnl.legend{display:block}
  .pnl + .pnl{border-top:1px solid var(--line)}
  .live-nav .segs{gap:10px} .segb .lb{font-size:13px}
  .plans .row{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .plans .wk{grid-column:1} .plans .ad,.plans .go{grid-column:1/-1}
  .calc{padding:22px}
  .pick .cost{font-size:60px}
  .pick .cost small{display:block;margin-top:8px}
  .harli h2{font-size:clamp(72px,22vw,110px)}
}
@media (max-width:560px){ .hero .lede .more{display:none} }

/* ---- the sample pack by email (Update 26R): on the industry pages a section right under the top; on the home page a
   block under the sample JHA ---- */
.smp{padding-block:72px 84px;border-bottom:1px solid rgba(255,255,255,.07)}
.smp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.smp-pic img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.smp-tx h2{font-size:clamp(30px,3.4vw,46px);max-width:16ch}
.smp-tx>p{color:var(--soft);max-width:34em;margin-top:14px}
.smp-form{margin-top:22px;max-width:560px}
.smp-form label,.smp-pick legend{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.smp-row{display:flex;gap:10px;flex-wrap:wrap}
.smp-row input{flex:1 1 240px;min-height:52px;padding:0 14px;border-radius:4px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);font:500 17px var(--body)}
.smp-row input::placeholder{color:var(--dim)}
.smp-row input:focus{border-color:var(--ember);outline:3px solid rgba(242,107,29,.35);outline-offset:1px}
.smp-row .btn{flex:0 0 auto}
.smp-form .micro,.smp-done .micro{margin-top:12px;font-size:14px;color:var(--muted)}
.smp-form .micro a,.smp-done .micro a{color:var(--text);font-weight:600;text-underline-offset:4px}
.smp-note{margin:10px 0 0;padding:10px 12px;border-radius:4px;background:rgba(242,107,29,.12);border-left:4px solid var(--ember);color:var(--text);font-size:15px}
.smp-done{margin-top:22px;padding:18px 20px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel)}
.smp-done .smp-sent{margin:0 0 12px;font-weight:700}
.smp-pick{border:0;padding:0;margin:0 0 14px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.smp-pick legend{float:left;margin:0 6px 0 0}
.smp-pick label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;margin:0;min-height:40px}
.smp-pick input{width:24px;height:24px;accent-color:var(--ember)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.smp-home{margin-top:34px;padding-top:30px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px 48px;align-items:start}
.smp-home h3{font-size:24px;margin:0}
.smp-home p{color:var(--muted);margin:8px 0 0;max-width:34em}
.smp-home .smp-form{margin-top:0}
.ihero .smp-ln,.hero .smp-ln{color:var(--text);font-weight:700;text-underline-offset:5px;text-decoration-thickness:1.5px}
@media (max-width:980px){.smp-grid{grid-template-columns:1fr;gap:28px}.smp-pic{order:1}.smp-tx{order:0}.smp-home{grid-template-columns:1fr}}
@media (max-width:860px){.smp{padding-block:48px 56px}.smp-row .btn{flex:1 1 100%}.smp-pic{margin-inline:-6px}}

/* Update 27: query-first headline, the slogan as a kicker */
.hero .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}
.hero h1.long{font-size:clamp(34px,4.6vw,64px);max-width:17ch;line-height:1.04}

/* Oct 29: tablets get the photos sized to cover the box, so they never tile */
@media (min-width:561px) and (max-width:860px){.hero .a,.hero .b{background-size:cover}}
/* The free trial as four dated steps (Oct 29, 2026) */
.tl{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.tl li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
@media (min-width:560px) and (max-width:999px){.tl li{grid-template-columns:7.2em minmax(0,1fr);gap:4px 14px;align-items:baseline}}
.tl b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ember-hi);white-space:nowrap}
.tl span{color:var(--soft);font-size:16px;line-height:1.5}
.terms .tl-now{margin-top:14px;color:var(--muted);font-size:15px}
@media (min-width:1000px){
  .tl{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .tl li{grid-template-columns:minmax(0,1fr);align-content:start;padding-top:12px;border-top:2px solid var(--line)}
  .tl li:first-child,.tl li:last-child{border-top-color:var(--ember)}
}
/* phones: the hero photos at 1200 pixels wide (a phone shows them about 620 to 770 CSS pixels wide, so this is still sharp on a
   2x screen) instead of the 1800 and 2000 pixel desktop files */
@media (max-width:700px){.hero .a{background-image:url(/site/img/hero-site-sunset-1200.webp)}.hero .b{background-image:url(/site/img/hero-plant-1200.webp)}}
/* Phones: long lists open with the first few items and a "Show all" button (home.js, Nov 2026) */
.fold-more{display:none}
@media (max-width:640px){.fold-x{display:none!important}.fold-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:18px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;cursor:pointer}.fold-more[hidden]{display:none}.fold-more:focus-visible{outline:3px solid var(--ember);outline-offset:2px}}
/* "Month to month. Cancel anytime." under each monthly price and the calculator's (Nov 2026); empty, so hidden, while the
   yearly prices show */
.plans .pr em:empty,.pick .mtm:empty{display:none}
.pick .mtm{margin-top:8px;color:var(--muted);font-size:14.5px}
@media (max-width:860px){.plans .pr{text-align:right}.plans .pr em{max-width:10.5em;margin-left:auto}}
/* who writes the packages (Nov 2026), under the short packages block next to the plans */
.svc-mini .pk-cred{grid-column:2;color:var(--muted);font-size:15px}
@media (max-width:860px){.svc-mini .pk-cred{grid-column:1}}
/* Phones (Nov 4b): the two photos are a short band, the lede follows the button, and the sample pack is one tap away, so
   the headline, the button, the price line and the sample pack fit on the first screen (iPhone 13). Computers and
   tablets are unchanged (the sample pack link shows on phones only; on a computer the samples are right under the photo). */
.hero .other{display:none}
@media (max-width:640px){
  .hero .img,.hero .seam{height:162px}
  .hero .a,.hero .b{background-size:cover}
  .hero .a{background-position:42% 62%}
  .hero .b{background-position:24% 45%}
  .hero .shade{background:linear-gradient(180deg,rgba(7,11,18,.75) 0px,rgba(7,11,18,0) 70px,rgba(7,11,18,0) 110px,rgba(7,11,18,.92) 152px,#090E15 162px)}
  .hero .tx{padding-block:154px 44px}
  .hero .tg{top:120px}
  .hero h1.long{font-size:clamp(28px,8vw,34px)}
  .hero .tx .wrap{display:flex;flex-direction:column}
  .hero .kick{margin-bottom:8px}
  .hero .act{margin-top:12px}
  .hero .lede{order:1;margin-top:16px}
  .hero .other{display:block;margin-top:6px;font-size:16px;color:#C9D3E0}
}