/* ===========================================================================
   salesoutreacher.com

   Dependency free on purpose: one HTML file, one stylesheet, a folder of
   images. No framework, no build step, nothing to keep in version step with
   the app.

   HOUSE RULE: no em dashes in the copy. Comma, full stop, or colon.

   The page is built in three temperatures. The navy band at the top is the
   promise. The white middle is the evidence, which is real screens from the
   real product. The navy band at the bottom is the price and the ask. Nothing
   in between competes with the screenshots, because the gesture this product
   sells is a thing you have to see happen.
   =========================================================================== */

:root{
  --navy:#020B22;
  --navy-2:#07122E;
  --navy-3:#0D1B3D;
  --cyan:#05D0E6;
  --cyan-ink:#067E8C;

  --paper:#FFFFFF;
  --paper-2:#F4F7FB;
  --line:#E0E5EF;
  --ink:#0C1424;
  --ink-2:#414A5C;
  --ink-3:#6C768C;

  --on-navy:#C3D0E6;
  --on-navy-dim:#8496B5;

  --ui:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ui);font-size:17px;line-height:1.6;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.narrow{max-width:800px;margin:0 auto;padding:0 28px}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-block;padding:13px 22px;border-radius:9px;font-weight:700;
  font-size:16px;text-decoration:none;border:1px solid transparent;
  transition:transform .12s ease, background .15s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-go{background:var(--cyan);color:#022029}
.btn-go:hover{background:#2BDDEF}
.btn-ghost{border-color:rgba(195,208,230,.35);color:#fff}
.btn-ghost:hover{border-color:rgba(195,208,230,.7)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-3)}
.btn-lg{padding:16px 30px;font-size:17px}
/* The header buttons. One size and one shape for all three, so the row reads
   as a set rather than three things that happen to sit together. The ordering
   and the fill carry the hierarchy instead: the solid one is what most people
   came to do. */
.btn-nav{padding:10px 18px;font-size:15px;line-height:1.35}

/* --- the navy band at the top ------------------------------------------- */
.top{
  background:var(--navy);color:#fff;
  background-image:radial-gradient(900px 420px at 72% -8%, rgba(5,208,230,.16), transparent 62%);
}
.nav{display:flex;align-items:center;gap:20px;padding:22px 0}
.nav img{height:30px;width:auto}
.nav .sp{flex:1}
.nav a.plain{color:var(--on-navy);text-decoration:none;font-weight:600;font-size:15.5px}
.nav a.plain:hover{color:#fff}

.hero{padding:54px 0 76px;display:grid;grid-template-columns:1fr 1.18fr;gap:50px;align-items:center}
.eyebrow{
  color:var(--cyan);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px;
}
.hero h1{
  font-size:clamp(33px,3.7vw,47px);line-height:1.1;letter-spacing:-1.1px;
  margin:0 0 20px;font-weight:800;
}
.hero p.lede{color:var(--on-navy);font-size:18px;line-height:1.62;margin:0 0 28px;max-width:32em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{color:var(--on-navy-dim);font-size:14px;margin:16px 0 0}

.hero-shot{position:relative}
.hero-shot img{
  border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(195,208,230,.16);
}
.shot-cap{
  margin:14px 0 0;color:var(--on-navy);font-size:15px;line-height:1.5;text-align:center;
}
.shot-cap b{color:#fff}


/* --- the argument ------------------------------------------------------- */
.argue{padding:92px 0 10px;text-align:center}
.argue h2{
  font-size:clamp(28px,3.4vw,42px);line-height:1.16;letter-spacing:-0.9px;
  margin:0 auto 26px;max-width:16em;font-weight:800;
}
.argue p{color:var(--ink-2);font-size:18px;margin:0 auto 20px;max-width:34em}
.argue strong{color:var(--ink)}

/* --- the evidence ------------------------------------------------------- */
.moments{padding:96px 0 0}
.moment{display:grid;grid-template-columns:1fr 1.35fr;gap:52px;align-items:center;margin-bottom:84px}
.moment.flip .m-text{order:2}
.m-text h3{font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-0.6px;margin:0 0 16px}
.m-text p{color:var(--ink-2);font-size:16.5px;margin:0 0 14px}
.m-text ul{margin:18px 0 0;padding:0;list-style:none}
.m-text li{
  color:var(--ink-2);font-size:15.5px;padding:0 0 10px 24px;position:relative;line-height:1.55;
}
.m-text li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--cyan);
}
.m-shot img{
  border-radius:12px;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(12,20,36,.13);
}

/* --- pricing ------------------------------------------------------------ */
.price{
  background:var(--navy);color:#fff;padding:92px 0 96px;margin-top:30px;
  background-image:radial-gradient(760px 380px at 20% 0%, rgba(5,208,230,.14), transparent 60%);
}
.price-head{text-align:center;margin-bottom:46px}
.price-head h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.9px;margin:0 0 14px;font-weight:800}
.price-head p{color:var(--on-navy);font-size:18px;margin:0 auto;max-width:32em}

/* One card, centred. It was two columns, and the second one read as a rival
   offer rather than as the small print of the first. Constrained rather than
   full width because a 1140px line of body text in a card is not readable. */
.price-grid{max-width:660px;margin:0 auto}
.price-card{
  background:var(--navy-2);border:1px solid rgba(195,208,230,.17);border-radius:14px;
  padding:34px 32px 36px;
}
.price-card.lead{border-color:rgba(5,208,230,.42)}
.tagline{
  display:inline-block;background:rgba(5,208,230,.14);color:var(--cyan);
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin-bottom:20px;
}
/* `display:inline-block` above beats the browser's own rule for [hidden], so
   the pill would still be on the page when the script hides it. Exactly the
   same trap as `.rung`, and the second time it has been worth a line of CSS. */
.tagline[hidden]{display:none}
.figure{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.figure b{font-size:54px;letter-spacing:-2px;line-height:1;font-weight:800}
.figure span{color:var(--on-navy);font-size:16px}
.exvat{color:var(--on-navy-dim);font-size:15px;margin:10px 0 0}
.places{
  margin:16px 0 0;color:var(--cyan);font-weight:700;font-size:15.5px;line-height:1.5;
}
.rung.gone{opacity:.42}
.rung.gone b{text-decoration:line-through}
.price-card ul{margin:26px 0 0;padding:0;list-style:none}
.price-card li{
  color:var(--on-navy);font-size:15.5px;padding:0 0 13px 26px;position:relative;line-height:1.55;
}
.price-card li::before{
  content:"";position:absolute;left:2px;top:7px;width:7px;height:12px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(42deg);
}
.price-card li b{color:#fff}
.price-card .btn{margin-top:22px}

/* Separated from the button by a rule rather than by a gap, so it reads as
   the terms of the thing above it rather than as a second subject. */
.ladder{
  margin-top:32px;padding-top:26px;
  border-top:1px solid rgba(195,208,230,.14);
}
.rung{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid rgba(195,208,230,.12);font-size:15.5px;color:var(--on-navy);
}
.rung:last-of-type{border-bottom:0}
/* `display:flex` above beats the browser's own rule for [hidden], so a band
   marked hidden would still be on the page. This is the line that actually
   keeps next quarter's price off it. */
.rung[hidden]{display:none}
.rung b{color:#fff;font-weight:700;min-width:74px}
.rung .who{flex:1;color:var(--on-navy-dim);font-size:14.5px}
.rung.now b{color:var(--cyan)}
.ladder .small{color:var(--on-navy-dim);font-size:13.5px;line-height:1.55;margin:18px 0 0}

/* --- the close ---------------------------------------------------------- */
.close{padding:96px 0;text-align:center}
.close h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.9px;margin:0 0 18px;font-weight:800}
.close p{color:var(--ink-2);font-size:18px;margin:0 auto 30px;max-width:32em}

/* --- footer ------------------------------------------------------------- */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:42px 0 54px}
.foot{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start}
.foot img{height:26px;width:auto;margin-bottom:14px}
.foot-co{flex:1;min-width:280px;color:var(--ink-3);font-size:13.5px;line-height:1.7}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14.5px;font-weight:600}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* --- narrow screens ----------------------------------------------------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:38px;padding-top:34px}
  .moment{grid-template-columns:1fr;gap:28px;margin-bottom:62px}
  .moment.flip .m-text{order:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap,.narrow{padding:0 20px}
  .nav{flex-wrap:wrap;gap:12px}
  .figure b{font-size:44px}
  .argue{padding-top:68px}
}

/* The hero demo ------------------------------------------------------------
   The gesture, playing. Built as HTML and CSS rather than a GIF or a video:
   it stays sharp at any size, weighs nothing, needs no JavaScript, and it
   cannot go out of date in the way a recording does.

   EVERYTHING IS SIZED IN em AND POSITIONED IN PER CENT, deliberately. The
   whole demo scales from the one font-size on .demo, so it works in the hero
   at 560px and on a phone at 330px without a second set of numbers to keep in
   step. Change the font-size and the whole thing resizes.

   One shared 10 second timeline. Each element has its own keyframes using the
   same percentages, which is what keeps the steps in order:

     5 to 12%   the name is selected
    12 to 18%   the pointer moves to where the click happens
    18 to 20%   the menu opens
    30 to 33%   the Sales Outreacher item is pressed
    33 to 35%   the menu closes
    36 to 41%   the panel arrives with the address it found
    48 to 52%   the campaign list drops down
    58 to 62%   a campaign is picked
          92%   hold, then reset

   Anybody with reduced motion turned on gets the still image instead. Not a
   paused animation: a chosen frame, so what they see is deliberate. */
.demo{
  position:relative;width:100%;aspect-ratio:800/600;
  font-size:clamp(8.5px,1.02vw,12.5px);
  font-family:var(--ui);background:#fff;border-radius:1em;overflow:hidden;
  box-shadow:0 2.4em 5.6em rgba(0,0,0,.45);border:1px solid rgba(195,208,230,.16);
  color:#0E1626;line-height:1.5;
}
.demo-still{display:none}

.d-bar{
  height:3.4em;background:#F6F7FA;border-bottom:1px solid #E6E9F0;
  display:flex;align-items:center;gap:1em;padding:0 1.1em;
}
.d-dots{display:flex;gap:.5em}
.d-dots i{width:.78em;height:.78em;border-radius:50%}
.d-dots i:nth-child(1){background:#F05D52}
.d-dots i:nth-child(2){background:#F5BE4F}
.d-dots i:nth-child(3){background:#5FC264}
.d-url{
  flex:1;height:2em;background:#fff;border:1px solid #E2E6EE;border-radius:.5em;
  display:flex;align-items:center;padding:0 .9em;color:#56607A;font-size:1.05em;
}
.d-page{padding:1.7em 1.9em}
.d-kicker{color:#8A93A8;font-size:.88em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7em}
.d-h1{font-family:Georgia,"Times New Roman",serif;font-size:1.95em;color:#0E1626;margin-bottom:.4em;font-weight:700}
.d-intro{color:#4A5467;font-size:1.05em;line-height:1.55;max-width:40em;margin:0 0 1.4em}
.d-people{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.d-person{border:1px solid #E4E8F0;border-radius:.8em;padding:1.1em;display:flex;flex-direction:column}
.d-ava{width:2.6em;height:2.6em;border-radius:50%;background:#C7D2E6;margin-bottom:.8em}
.d-ava.two{background:#E2D5C4}
.d-person b{font-size:1.2em;color:#0E1626;margin-bottom:.2em}
.d-role{color:#6C768C;font-size:1.05em;margin-bottom:.65em}
.d-mail{color:#2563C9;font-size:1.05em}

/* The selection sweeps across the word rather than appearing, because that is
   what dragging across a word looks like. */
.d-sel{
  background-image:linear-gradient(#AED4FF,#AED4FF);background-repeat:no-repeat;
  background-size:0 100%;border-radius:2px;
  animation:dSel 10s linear infinite both;
}
@keyframes dSel{
  0%,5%{background-size:0 100%}
  12%,92%{background-size:100% 100%}
  96%,100%{background-size:0 100%}
}

/* The menu. Plain and system looking on purpose: the point is that the product
   is in a menu people already use, so brand colours would tell a lie. */
.d-menu{
  position:absolute;left:16%;top:50%;width:21em;
  background:#fff;border:1px solid #D9DEE8;border-radius:.7em;
  box-shadow:0 1.4em 3.4em rgba(10,18,40,.26);padding:.45em;font-size:.98em;
  opacity:0;transform:scale(.97);transform-origin:top left;
  animation:dMenu 10s linear infinite both;
}
@keyframes dMenu{
  0%,17%{opacity:0;transform:scale(.97)}
  20%,33%{opacity:1;transform:scale(1)}
  35%,100%{opacity:0;transform:scale(1)}
}
.d-mi{padding:.62em .8em;border-radius:.45em;white-space:nowrap;color:#5A6377;display:flex;align-items:center;gap:.7em}
.d-sep{height:1px;background:#E6E9F0;margin:.45em .3em}
.d-ours{background:#0B57D0;color:#fff;font-weight:600;animation:dPress 10s linear infinite both}
@keyframes dPress{
  0%,30%{filter:none}
  31.5%{filter:brightness(1.3)}
  33%,100%{filter:none}
}
.d-ico{
  width:1.35em;height:1.35em;border-radius:.3em;background:#061024;color:#05D0E6;
  font-size:.74em;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex:none;letter-spacing:-.04em;
}
.d-ours .d-ico{background:#fff;color:#061024}

/* The panel, which is what the menu item opens. */
.d-panel{
  position:absolute;right:1.4em;top:8%;width:23em;background:#fff;
  border:1px solid #DEE3EC;border-radius:1em;box-shadow:0 1.8em 4.4em rgba(10,18,40,.26);
  overflow:hidden;opacity:0;animation:dPanel 10s linear infinite both;
}
@keyframes dPanel{
  0%,35%{opacity:0;transform:translateY(.7em) scale(.98)}
  41%,92%{opacity:1;transform:translateY(0) scale(1)}
  96%,100%{opacity:0;transform:translateY(0) scale(1)}
}
.d-phead{display:flex;align-items:center;gap:.7em;padding:1em 1.2em;border-bottom:1px solid #EDF0F5}
.d-phead b{font-size:1.1em}
.d-pbody{padding:1.2em}
.d-pname{font-size:1.5em;font-weight:700;margin-bottom:.8em}
.d-found{background:#ECFCFE;border:1px solid #BFEFF5;border-radius:.7em;padding:.85em 1em;margin-bottom:1.1em}
.d-found span{color:#0A7A88;font-size:1.05em;display:block;margin-bottom:.15em}
.d-found em{color:#5E8A91;font-size:.92em;font-style:normal}
.d-lbl{color:#8A93A8;font-size:.85em;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.55em}
.d-pick{
  border:1px solid #DDE2EC;border-radius:.6em;padding:.8em .95em;font-size:1.05em;
  display:flex;align-items:center;justify-content:space-between;color:#0E1626;
}
.d-pick i{color:#8A93A8;font-style:normal;font-size:.8em}

/* The campaign list. This is the part that answers "and then what": the
   campaigns are the ones you wrote, waiting in the menu. */
.d-list{
  margin-top:.4em;border:1px solid #DDE2EC;border-radius:.6em;overflow:hidden;
  max-height:0;opacity:0;animation:dList 10s linear infinite both;
}
@keyframes dList{
  0%,48%{max-height:0;opacity:0}
  52%,92%{max-height:12em;opacity:1}
  95%,100%{max-height:0;opacity:0}
}
.d-opt{padding:.72em .95em;font-size:1.05em;border-bottom:1px solid #EDF0F5}
.d-opt:last-child{border-bottom:0}
.d-opt.pick-me{animation:dOpt 10s linear infinite both}
@keyframes dOpt{
  0%,58%{background:#fff;color:#0E1626}
  62%,92%{background:#EAF2FF;color:#0B57D0;font-weight:700}
  95%,100%{background:#fff;color:#0E1626}
}

.d-cursor{position:absolute;width:1.2em;height:1.7em;left:28%;top:50%;animation:dCursor 10s linear infinite both}
/* The pointer leads every step, so the eye is already where the next thing
   happens. It drags across the name, right clicks where it finished, comes
   down onto the Sales Outreacher row, then follows the panel. */
@keyframes dCursor{
  0%,5%{left:8%;top:49%}
  12%,17%{left:17%;top:49%}
  20%{left:17%;top:52%}
  28%,33%{left:24%;top:73%}
  41%{left:62%;top:40%}
  52%{left:86%;top:55%}
  62%,92%{left:80%;top:65%}
  100%{left:28%;top:49%}
}

@media (prefers-reduced-motion:reduce){
  .demo{display:none}
  .demo-still{display:block}
}

/* The band in the middle ---------------------------------------------------
   One long white run from the hero to the price made the page feel like a
   single undifferentiated scroll. This gives it a middle. The screenshots sit
   on the tinted ground and the mailbox section after it comes back to white,
   so the last thing before the price has the page to itself. */
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .moments{padding:86px 0 0}
.band .m-shot img{background:#fff}
.band .moment:last-child{margin-bottom:0}
.band .moments{padding-bottom:86px}

/* The steps, numbered, because they are steps. The rest of the lists on the
   page are claims and keep their dash. */
.steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;color:var(--ink-2);font-size:15.5px;line-height:1.55;
  padding:0 0 12px 36px;position:relative;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
}