/* /personal-branding-tools: the laptop that opens each tool, in the IP green. */
:root{--lp-green:#3DF5A0;}
.lp-hero h1 em{color:var(--lp-green);}
.lp .section-head h2 em,.lp-why .section-head h2 em{color:var(--lp-green);}
.lp-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-areas:"tabs stage" "tabs info";column-gap:48px;align-items:start;margin-top:10px;}
.lp-tabs{grid-area:tabs;}.lp-stage{grid-area:stage;}.lp-info{grid-area:info;}
/* the tool list */
.lp-tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--rule-dark);}
.lp-tabs li{margin:0;}
.lp-tab{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;margin-left:-1px;padding:11px 16px;cursor:pointer;
  color:var(--steel);font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.lp-tab:hover{color:var(--white);}
.lp-tab[aria-selected="true"]{color:var(--white);border-left-color:var(--lp-green);background:linear-gradient(90deg,rgba(61,245,160,.10),transparent 80%);}
.lp-tab-n{font-size:10.5px;letter-spacing:.14em;color:var(--lp-green);flex:none;}
.lp-tab:focus-visible{outline:2px solid var(--lp-green);outline-offset:-2px;}
/* the laptop */
.lp-stage{min-width:0;}
.lp-laptop{position:relative;width:100%;max-width:780px;margin:0 auto;perspective:1800px;}
.lp-lid{position:relative;transform-origin:50% 100%;transition:transform 1.3s cubic-bezier(.22,1,.36,1),opacity .8s ease;}
.lp-laptop.is-closed .lp-lid{transform:rotateX(-88deg);opacity:.35;}
.lp-bezel{position:relative;background:linear-gradient(180deg,#1b1c20,#111215);border:1px solid #2c2d33;border-radius:16px 16px 4px 4px;padding:22px 18px 18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;}
.lp-cam{position:absolute;top:8px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#26272c;box-shadow:0 0 0 2px #151619;}
.lp-screen{position:relative;aspect-ratio:16/10.6;background:#0A0A0A;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(61,245,160,.10);}
.lp-chrome{flex:none;display:flex;align-items:center;gap:12px;height:30px;padding:0 12px;background:#16171a;border-bottom:1px solid #26262A;}
.lp-dots{display:flex;gap:6px;}.lp-dots i{width:9px;height:9px;border-radius:50%;background:#34353b;}
.lp-dots i:first-child{background:#5b2e2e;}.lp-dots i:nth-child(2){background:#5a4a24;}.lp-dots i:nth-child(3){background:#1f4a35;}
.lp-url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:19px;padding:0 10px;background:#0E0E11;border:1px solid #26262A;border-radius:10px;font-family:var(--body);font-size:11px;color:var(--platinum);overflow:hidden;white-space:nowrap;}
.lp-lock{flex:none;width:7px;height:6px;border:1.5px solid var(--lp-green);border-radius:1px;position:relative;top:1px;}
.lp-lock::before{content:"";position:absolute;left:0;top:-5px;width:3px;height:4px;border:1.5px solid var(--lp-green);border-bottom:0;border-radius:3px 3px 0 0;}
.lp-url-t{overflow:hidden;text-overflow:ellipsis;}
.lp-load{position:absolute;left:0;right:0;top:30px;height:2px;z-index:3;pointer-events:none;}
.lp-load i{display:block;height:100%;width:0;background:var(--lp-green);box-shadow:0 0 12px var(--lp-green);opacity:0;}
.lp-load.is-run i{animation:lp-load .9s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes lp-load{0%{width:0;opacity:1}70%{width:85%;opacity:1}100%{width:100%;opacity:0}}
.lp-view{position:relative;flex:1;display:block;overflow:hidden;background:#0A0A0A;cursor:pointer;}
.lp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:translateY(14px) scale(1.01);transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.lp-img.is-on{opacity:1;transform:none;}
.lp-img.is-out{opacity:0;transform:translateY(-10px);}
.lp-view::after{content:"Open the tool \2197";position:absolute;right:14px;bottom:14px;padding:8px 12px;background:var(--lp-green);color:#0A0A0A;font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:all .3s var(--ease);}
.lp-view:hover::after,.lp-view:focus-visible::after{opacity:1;transform:none;}
.lp-view:focus-visible{outline:2px solid var(--lp-green);outline-offset:-2px;}
.lp-base{position:relative;height:18px;margin:0 -7%;background:linear-gradient(180deg,#2a2b30,#17181b);border-radius:2px 2px 16px 16px;box-shadow:0 18px 30px -12px rgba(0,0,0,.9);}
.lp-base::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(180deg,#3a3b41,#232428);border-radius:2px 2px 0 0;}
.lp-notch{position:absolute;top:0;left:50%;width:120px;height:7px;margin-left:-60px;background:#141518;border-radius:0 0 8px 8px;}
/* what is on the screen */
.lp-info{width:100%;max-width:780px;margin:34px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:30px;align-items:end;}
.lp-info.is-in>*{animation:lp-in .5s var(--ease) both;}
.lp-info.is-in>:nth-child(2){animation-delay:.05s}.lp-info.is-in>:nth-child(3){animation-delay:.1s}
@keyframes lp-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.lp-info-n{grid-column:1/-1;margin:0 0 8px;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-green);}
.lp-info h3{grid-column:1;font-size:clamp(24px,2.6vw,32px);margin:0 0 10px;}
.lp-info p[data-lp-does]{grid-column:1;color:var(--platinum);margin:0;line-height:1.7;}
.lp-open{grid-column:2;grid-row:2 / span 2;align-self:center;}
/* the suite */
.lp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light);}
.lp-card{display:flex;flex-direction:column;padding:26px 24px 24px;border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);color:var(--ink);text-decoration:none;background:var(--white);transition:background .3s var(--ease);}
.lp-card:hover{background:#F3FBF7;}
.lp-card-n{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#127A4B;}
.lp-card h3{font-size:19px;margin:12px 0 8px;}
.lp-card p{color:var(--ink-body);font-size:14.5px;line-height:1.65;margin:0 0 16px;}
.lp-card .more{margin-top:auto;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
@media (max-width:980px){
  .lp-grid{grid-template-columns:1fr;grid-template-areas:"stage" "tabs" "info";row-gap:18px;}
  .lp-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;border-left:0;border-bottom:1px solid var(--rule-dark);gap:0;-webkit-overflow-scrolling:touch;}
  .lp-tabs::-webkit-scrollbar{display:none;}
  .lp-tab{border-left:0;border-bottom:2px solid transparent;margin:0 0 -1px;white-space:nowrap;padding:12px 14px;}
  .lp-tab[aria-selected="true"]{border-bottom-color:var(--lp-green);background:none;}
  .lp-info{grid-template-columns:1fr;margin-top:24px;}
  .lp-open{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px;}
}
@media (max-width:560px){
  .lp-bezel{padding:14px 9px 10px;border-radius:10px 10px 3px 3px;}
  .lp-chrome{height:22px;padding:0 8px;gap:8px;}.lp-dots i{width:6px;height:6px;}.lp-url{height:15px;font-size:8.5px;}
  .lp-load{top:22px;}
  .lp-base{height:11px;}.lp-notch{width:70px;margin-left:-35px;height:5px;}
}
@media (prefers-reduced-motion:reduce){.lp-lid,.lp-img{transition:none;}.lp-load.is-run i{animation:none;}}

.lp{overflow:hidden;overflow:clip;}
@media (max-width:560px){.lp-base{margin:0 -3%;}}