/* Helio SEO front-page hero (9 Oct 2026), in the same design language as the
   Helio Guard and Helio Posts sites: one real photo, the words on the left, and
   crisp product cards floating over the open wall on the right. It replaced the
   dark video hero. Everything is scoped under .h2 so nothing here can touch the
   rest of the page.

   The three stories are an invented florist's, matching the photo: a question an
   assistant missed, a search nobody answered, a draft waiting for a yes. Engine: the short script at the foot of sales.html. */
.h2{--ink:#121417;--soft:#5D636D;--paper:#fff;--line:rgba(18,20,23,.09);--navy:#12203C;--amber:#F0A73A;--ok:#1F6B45;--ok-bg:#E3F1E8;--stop:#A3361C;--stop-bg:#FBE7E1;
  --shadow:0 30px 60px -22px rgba(20,16,12,.42),0 0 0 1px rgba(0,0,0,.05);padding:14px 24px 0;background:var(--bg,#F3F5F8)}
.h2-frame{position:relative;max-width:1392px;margin:0 auto;height:min(calc(100vh - 306px),760px);min-height:480px;border-radius:28px;overflow:hidden;background:#d9d5cd}
.h2-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.h2-grade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,32,.74) 0%,rgba(18,22,32,.52) 26%,rgba(18,22,32,.14) 44%,rgba(18,22,32,0) 56%)}
.h2-words{position:absolute;left:56px;top:57%;transform:translateY(-50%);max-width:540px;color:#fff;z-index:2}
.h2-words h1{font-family:'Libre Franklin',sans-serif;font-size:clamp(34px,3.6vw,50px);line-height:1.06;letter-spacing:-.018em;font-weight:700;color:#fff;margin:0}
.h2-words .sub{margin:16px 0 24px;font-size:19px;line-height:1.5;color:rgba(255,255,255,.94);max-width:470px}
.h2-words .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.h2-words .btn{display:inline-flex;align-items:center;padding:13px 22px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:15.5px;text-decoration:none;transition:transform 160ms ease,background 160ms ease}
.h2-words .btn:hover{transform:translateY(-1px);background:#ECEFF4}
.h2-words .alt{color:#fff;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.h2-words .meta{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.84)}
.h2-note{max-width:1392px;margin:10px auto 0;padding:0 6px;font-size:13px;color:var(--soft)}

.h2-scenes .scene{opacity:0;transition:opacity .45s ease;pointer-events:none}
.h2-scenes .scene.on{opacity:1}
.h2-slot{position:absolute;z-index:3;right:40px}
.h2-slot.a{top:44px;width:410px}
.h2-slot.b{top:var(--top,248px);width:340px}
.h2-card{background:var(--paper);border-radius:16px;box-shadow:var(--shadow);position:relative;font-size:15px;line-height:1.45;color:var(--ink);padding:0 0 16px}
.h2-card.hit::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--amber);animation:h2flash 1400ms ease-out forwards;pointer-events:none}
@keyframes h2flash{from{opacity:1}to{opacity:0}}
.h2-card .head{display:flex;align-items:center;gap:10px;padding:13px 16px 0}
.h2-card .badge{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--t,#F2F2F2)}
.h2-card .badge img{width:19px;height:19px;display:block}
.h2-card .badge img.face{width:34px;height:34px;border-radius:10px}
.h2-card .tool{font-weight:700;font-size:15px}
.h2-card .when{margin-left:auto;font-size:12.5px;color:var(--soft);white-space:nowrap}
.h2-card .q{margin:11px 16px 0;padding:11px 13px;border-radius:13px;background:#F0F1F3;font-size:15.5px;line-height:1.4;font-weight:500}
.h2-card .t{margin:11px 16px 0;font-size:16.5px;line-height:1.3;font-weight:700}
.h2-card .d{margin:6px 16px 0;font-size:13.5px;color:var(--soft)}
.h2-card .flag{display:flex;align-items:center;gap:8px;margin:12px 16px 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px}
.h2-card .flag i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--stop)}
.h2-card .flag.ok i{background:var(--ok)}
.h2-card .flag.wait i{background:var(--amber)}
.h2-dots{position:absolute;right:40px;bottom:28px;display:flex;gap:7px;z-index:4}
.h2-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);display:block;box-shadow:0 0 0 1px rgba(18,20,23,.12)}
.h2-dots i.on{background:#fff;width:22px;border-radius:4px}

/* The cards arrive in turn. Only under .anim, which the script adds, so without
   the script, or when less motion is asked for, every card simply shows. */
.h2-scenes.anim .rise{opacity:0;transform:translateY(18px) scale(.94);transition:opacity 450ms ease,transform 650ms cubic-bezier(.2,1.2,.3,1)}
.h2-scenes.anim .rise.in{opacity:1;transform:none}
.h2-scenes.anim .st{opacity:0;transform:translateY(7px);transition:opacity 380ms ease,transform 420ms cubic-bezier(.2,.8,.2,1)}
.h2-scenes.anim .st.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.h2-scenes .scene,.h2-scenes.anim .rise,.h2-scenes.anim .st{transition:none}}

@media (min-width:901px) and (max-width:1280px){.h2-slot.a{width:360px}.h2-slot.b{width:310px}.h2-words{max-width:470px}.h2-words h1{font-size:40px}.h2-words .sub{font-size:17px;max-width:420px}}
@media (min-width:901px) and (max-width:1060px){.h2-slot{right:24px}.h2-slot.a{width:320px}.h2-slot.b{width:290px}.h2-words{left:36px;max-width:360px}}
@media (min-width:901px) and (max-height:760px){.h2-slot.a{top:28px}.h2-slot.b{top:calc(var(--top,248px) - 26px)}}
@media (max-width:900px){
  .h2{padding:10px 12px 0}
  .h2-frame{height:auto;min-height:0;display:flex;flex-direction:column;border-radius:22px;background:var(--navy)}
  .h2-photo{position:relative;height:290px;object-position:46% 30%}
  .h2-grade{display:none}
  .h2-words{position:relative;left:auto;top:auto;transform:none;max-width:none;padding:22px 20px 26px;order:3}
  /* One story, standing still: cards of different heights taking turns would
     push the headline up and down under the thumb. */
  .h2-scenes{order:2;position:relative;margin:-96px 12px 0}
  .h2-scenes .scene{display:none}
  .h2-scenes .scene:first-child{display:block;opacity:1}
  .h2-slot{position:relative;right:auto;top:auto !important;width:auto !important}
  .h2-slot.b,.h2-dots{display:none}
}

/* ---------- the tour: one real screen at a time ---------- */
.t2 .hm-head{margin-bottom:30px}
.t2-show{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:34px;align-items:start}
.t2-list{display:grid;gap:6px}
.t2-list button{position:relative;display:block;width:100%;text-align:left;padding:15px 18px 16px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer;overflow:hidden;transition:background 200ms ease,box-shadow 200ms ease}
.t2-list button b{display:block;font-family:'Libre Franklin',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;color:#353A42}
.t2-list button span{display:grid;grid-template-rows:0fr;opacity:0;font-size:15px;line-height:1.5;color:#5D636D;transition:grid-template-rows 320ms ease,opacity 260ms ease,margin 320ms ease}
.t2-list button span{overflow:hidden;max-height:0;transition:max-height 320ms ease,opacity 260ms ease,margin 320ms ease}
.t2-list button:hover{background:rgba(18,20,23,.04)}
.t2-list button.on{background:#fff;box-shadow:0 14px 34px -18px rgba(20,16,12,.35),0 0 0 1px rgba(18,20,23,.07)}
.t2-list button.on b{color:#121417}
.t2-list button.on span{max-height:120px;opacity:1;margin-top:6px}
.t2-list .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#F0A73A}
.t2-show.run .t2-list button.on .bar{animation:t2bar 6000ms linear forwards}
@keyframes t2bar{from{width:0}to{width:100%}}
.t2-stage{position:relative;aspect-ratio:16/10;border-radius:18px;background:#fff;box-shadow:0 30px 60px -28px rgba(20,16,12,.38),0 0 0 1px rgba(18,20,23,.07);overflow:hidden}
.t2-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;padding:14px;opacity:0;transition:opacity 420ms ease}
.t2-stage img.on{opacity:1}
.t2-stage img:first-child{object-fit:cover;object-position:0 0;padding:0}
.t2-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 0}
@media (prefers-reduced-motion:reduce){.t2-stage img,.t2-list button span{transition:none}}
@media (max-width:900px){
  .t2-show{grid-template-columns:1fr;gap:16px}
  .t2-stage{order:-1;aspect-ratio:4/3}
  .t2-list button{padding:12px 14px 13px}
  .t2-list button b{font-size:16.5px}
}

/* What happens after an article is published (10 Oct 2026). */
.af{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.af-list{list-style:none;margin:26px 0 0;padding:0}
.af-list li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.af-list li:last-child{border-bottom:1px solid var(--line)}
.af-list li>span{font-size:13px;font-weight:700;color:var(--gold-ink);padding-top:3px}
.af-list h3{margin:0;font-size:18px;line-height:1.3}
.af-list p{margin:5px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.af-note{margin:16px 0 0;font-size:14px;color:var(--ink2)}
.af-scene{position:relative;background:#F4EFE4;border-radius:26px;padding:44px 40px 86px}
.af-card{background:#fff;border-radius:16px;box-shadow:0 30px 60px -26px rgba(20,16,12,.38),0 0 0 1px rgba(0,0,0,.05);padding:0 18px 18px}
.af-card .head{display:flex;align-items:center;gap:10px;padding:14px 0 0}
.af-card .badge{flex:none;width:34px;height:34px;border-radius:10px;overflow:hidden}
.af-card .badge img{width:34px;height:34px;display:block}
.af-card .tool{font-weight:700}
.af-card .when{margin-left:auto;font-size:12.5px;color:#5D636D}
.af-card .t{margin:12px 0 0;font-size:18px;font-weight:700;line-height:1.3}
.af-chart{position:relative;margin:14px 0 0;height:150px;padding:22px 0 24px}
.af-plot{position:relative;height:100%}
.af-chart svg{display:block;width:100%;height:100%;overflow:visible}
.af-plot .dot{position:absolute;left:97.5%;top:30%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #fff}
.af-chart .p1{stroke:#1F8A5B;stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.af-chart .ln{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.af-chart .lab{position:absolute;font-size:12.5px;color:#5D636D}
.af-chart .lab.top{left:0;top:0;color:#17694A;font-weight:600}
.af-chart .lab.now{right:0;top:0;color:var(--ink);font-weight:700}
.af-chart .lab.wk{left:0;bottom:0}
.af-sub{margin:10px 0 0;font-size:13px;font-weight:700;color:#5D636D}
.af-q{list-style:none;margin:6px 0 0;padding:0;font-size:14.5px}
.af-q li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #EEE9DE}
.af-q b{font-variant-numeric:tabular-nums}
.af-btn{display:inline-block;margin-top:12px;background:var(--gold);color:#1B1408;font-weight:700;font-size:14.5px;border-radius:999px;padding:9px 18px}
.af-said{position:absolute;right:-18px;bottom:-20px;width:min(270px,72%);background:var(--navy);color:#fff;border-radius:16px;padding:14px 16px 15px;box-shadow:0 26px 50px -22px rgba(16,29,61,.6)}
.af-said span{font-size:12.5px;font-weight:700;color:#F5C879}
.af-said p{margin:6px 0 8px;font-size:15.5px;line-height:1.4;font-weight:600;color:#fff}
.af-said i{font-style:normal;font-size:13px;color:#C9D2E6}
html.js .af-scene.reveal .ln{clip-path:inset(-10px 100% -10px 0);transition:clip-path 1.6s ease .2s}
html.js .af-scene.reveal.is-visible .ln{clip-path:inset(-10px -10px -10px 0)}
html.js .af-scene.reveal .dot{opacity:0;transition:opacity .3s ease 1.7s}
html.js .af-scene.reveal.is-visible .dot{opacity:1}
@media (prefers-reduced-motion:reduce){html.js .af-scene.reveal .ln{clip-path:none;transition:none}html.js .af-scene.reveal .dot{opacity:1;transition:none}}
@media (max-width:980px){
  .af{grid-template-columns:1fr;gap:34px}
  .af-scene{padding:16px 16px 18px}
  .af-said{position:static;width:auto;margin:14px 0 0}
}
@media (max-width:520px){
  .af-list li{grid-template-columns:1fr;gap:4px}
}