/* POOLSE - campaign landing page /start/ (chat #4828). Loaded after site.css and only by that
   page: every token, button, section and the header come from site.css; this file holds what is
   new here, the "who opened" check in the hero and the three-step loop. Logical properties only. */

/* type sizes come from site.css, as on the home page (chat #4828); the headline only breaks after its first word */
.lp .hero__h1b{display:block}
.lp .hero__lead{max-width:31em}

/* ---- the signature: the check that runs after a newsletter ---- */
.chk{position:relative;border-radius:var(--r18);padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
  border:1px solid var(--d-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.32), 0 30px 70px rgba(0,0,0,.42)}
.chk::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.1px);background-size:16px 16px}
.chk__hd{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding-block-end:16px;border-block-end:1px solid var(--d-line)}
.chk__ttl{font-weight:600;font-size:16px}
.chk__sub{margin-block-start:3px;font-size:12.5px;color:var(--d-mut)}

.chk__cols,.rw{display:grid;grid-template-columns:30px minmax(0,1fr) 7.4em 9.6em;align-items:center;gap:12px}
.chk__cols{position:relative;padding:12px 10px 6px;font-size:11.5px;font-weight:500;color:#6f7891}
.chk__body{position:relative}
.chk__list{position:relative;display:grid;gap:4px}
.rw{position:relative;padding:9px 10px;border-radius:var(--r10);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.rw__av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:600;color:#d9d5ff;background:rgba(74,58,255,.28)}
.rw__n{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw__w{display:flex;align-items:center;gap:7px;font-size:13px;color:#c3cadb;white-space:nowrap}
.rw__dot{width:7px;height:7px;border-radius:50%;flex:none;background:#22c99b;box-shadow:0 0 0 3px rgba(34,201,155,.14)}
.rw__q{display:grid;gap:5px}
.rw__q small{font-size:11.5px;color:var(--d-mut);white-space:nowrap}
.q5{display:flex;gap:3px}
.q5 i{flex:1;height:5px;border-radius:2px;background:rgba(255,255,255,.10);
  transition:background 320ms ease}
.q5[data-n="5"] i,.q5[data-n="3"] i:nth-child(-n+3),.q5[data-n="1"] i:first-child{background:var(--acc-hover)}

/* the readers who stopped opening: dimmer, a grey dot, a muted bar */
.rw--cold{background:rgba(255,255,255,.02)}
.rw--cold .rw__av{color:#98a2ba;background:rgba(255,255,255,.08)}
.rw--cold .rw__n,.rw--cold .rw__w{color:#98a2ba}
.rw--cold .rw__dot{background:#525c74;box-shadow:none}
.rw--cold .q5 i{background:rgba(255,255,255,.10)}
.rw--cold .q5[data-n="3"] i:nth-child(-n+3),.rw--cold .q5[data-n="1"] i:first-child{background:#8f86ff}
.rw--cold .rw__q small{color:#b9b2ff}

.chk__ft{position:relative;display:flex;align-items:center;gap:9px;margin-block-start:14px;
  padding-block-start:13px;border-block-start:1px solid var(--d-line);font-size:13.5px;font-weight:500;color:#c3cadb}
.chk__ft .ic{width:16px;height:16px;color:#7ee2c0;stroke-width:2.4}

/* motion: a scan line passes over the readers, then each row shows what it gets.
   Only with JS (site.js adds .is-in on reveal, at once under ?norv or reduced motion). */
.chk__scan{display:none}
@media (prefers-reduced-motion: no-preference){
  .js .chk__scan{display:block;position:absolute;inset-inline:0;inset-block-start:0;height:44px;z-index:2;
    pointer-events:none;opacity:0;border-radius:var(--r10);
    background:linear-gradient(to bottom, rgba(122,109,255,0), rgba(122,109,255,.22) 70%, rgba(163,155,255,.55));
    box-shadow:0 1px 0 rgba(163,155,255,.7)}
  .js .chk.is-in .chk__scan{animation:chk-scan 1500ms cubic-bezier(.45,.05,.4,1) 300ms both}
  .js .chk .rw__q,.js .chk .rw__dot{opacity:0;transform:translateY(5px);
    transition:opacity 380ms ease, transform 380ms cubic-bezier(.2,.7,.3,1)}
  .js .chk.is-in .rw__q,.js .chk.is-in .rw__dot{opacity:1;transform:none;
    transition-delay:calc(450ms + var(--i) * 270ms)}
}
@keyframes chk-scan{
  0%{opacity:0;inset-block-start:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;inset-block-start:calc(100% - 44px)}
}

/* ---- the loop in three: you send, the system checks, the quiet get less ---- */
.how{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.how__i{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r14);
  padding:26px 24px 26px;box-shadow:var(--sh1)}
.how__i .tok--step{position:relative;z-index:1}
.how__i--you .tok--step{background:var(--d-bg);box-shadow:0 0 0 5px var(--sunken), 0 6px 16px rgba(15,14,26,.25)}
.how__who{margin-block:18px 4px;font-size:13px;font-weight:600;color:var(--acc)}
.how__i--you .how__who{color:var(--ink-3)}
.how h3{font-size:19px;font-weight:600;margin-block-end:8px}
.how__i > p:last-child{color:var(--ink-2);line-height:1.68}

/* the product strip and the two links under it */
.lp-more{display:flex;align-items:center;justify-content:center;gap:14px;margin-block-start:24px;font-size:15px}
.lp-more a{font-weight:600;color:var(--acc-strong);border-block-end:1px solid var(--acc-line);transition:border-color var(--t)}
.lp-more a:hover{border-block-end-color:var(--acc)}
.lp-more i{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.qa__a a{color:var(--acc-strong);font-weight:600;border-block-end:1px solid var(--acc-line)}

/* the FAQ sits on white here, the start steps on the sunken band */
.lp #start .tok--step{box-shadow:0 0 0 5px var(--sunken), var(--sh-acc)}

@media (max-width:960px){
  .how{grid-template-columns:minmax(0,1fr);gap:12px}
  .how::before{content:"";position:absolute;inset-block:40px 40px;inset-inline:47px auto;width:2px;height:auto;
    background:repeating-linear-gradient(to bottom, var(--acc-line) 0 6px, transparent 6px 12px)}
  .how__i{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding:20px 22px}
  .how__i .tok--step{grid-row:1 / span 3}
  .how__who{margin-block-start:2px}
}
@media (max-width:640px){
  .chk{padding:15px 12px 14px}
  .chk__cols,.rw{grid-template-columns:28px minmax(0,1fr) auto;gap:10px}
  .chk__cols span:last-child{display:none}
  .rw__q{grid-column:2 / -1;grid-row:2}
  .rw__q{grid-template-columns:5.6em auto;align-items:center;gap:10px}
  .rw__av{width:28px;height:28px;grid-row:1 / span 2;align-self:start}
  .how__i{grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:18px 18px}
  .how::before{inset-inline-start:38px}
}