/* elevate.css: the Identity Pack elevation (2026-09-29). Two layers that never mix:
   1. THEIR frames (.pf*): a plain drawing of the platform's own layout in the platform's own system type. Their
      picture, their words, their covers. No Stolan color, no Stolan type in here, ever.
   2. OUR chrome (.el-*): the torn cream poster, the acid slab for the number, the ink ground. Stolan tokens only:
      ink, cream, fern, stone, one acid in view, orange on the stamp star. One radius (--r), one rhythm. */

/* ================================================================ THEIR FRAMES */
.pf{--pf:#262626;--pf2:#737373;--pfline:#dbdbdb;--pflink:#00376b;background:#fff;color:var(--pf);font:400 1em/1.36 -apple-system,"SF Pro Text","Helvetica Neue",Roboto,Arial,sans-serif;
  height:100%;overflow:hidden;padding:1.1em 1.05em;text-align:left;letter-spacing:0;text-transform:none}
.pf *{box-sizing:border-box}
.pf b{font-weight:600}
.pf-av{display:block;width:5.6em;height:5.6em;border-radius:50%;object-fit:cover;flex:none;background:#eee}
.pf-av-none{background:repeating-linear-gradient(45deg,#eee 0 .3em,#f6f6f6 .3em .6em)}
.pf-bar{text-align:center;font-size:1.08em;margin:0 0 .85em}
.pf-i-head{display:flex;gap:1.3em;align-items:center}
.pf-i-id{display:grid;gap:.15em}.pf-i-id b{font-size:1.05em}.pf-i-id span{color:var(--pf2);font-size:.95em}
.pf-counts{display:flex;justify-content:space-around;flex:1;text-align:center;font-size:.92em;color:var(--pf)}
.pf-counts span{display:grid}
.pf-counts b{font-size:1.1em;min-height:1.3em}
.pf-name{display:block;margin-top:.75em;font-size:1em}
.pf-cat{display:block;color:var(--pf2);font-size:.95em}
.pf-bio{margin:.2em 0 0;font-size:1em;white-space:pre-line;word-break:break-word}
.pf-bio a{display:block;color:var(--pflink);font-weight:600}
.pf-bars{display:grid;gap:.42em;margin:.4em 0 .2em}
.pf-bars i{display:block;height:.62em;border-radius:.4em;background:linear-gradient(90deg,#e7e7e7,#f2f2f2)}
.pf-from{display:block;color:var(--pf2);font-size:.86em;margin-bottom:.15em}
.pf-hl{display:flex;gap:.9em;margin:.95em 0 .8em;overflow:hidden}
.pf-hl span{display:grid;justify-items:center;gap:.3em;width:4.5em;flex:none}
.pf-hl img,.pf-hl b{width:4.3em;height:4.3em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .12em #fff,0 0 0 .22em var(--pfline);display:block;background:#f1f1f1}
.pf-hl em{font-style:normal;font-size:.82em;max-width:4.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.18em;margin:0 -1.05em}
.pf-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
/* Google listing */
.pf-g{padding:0;--pflink:#1a0dab}
.pf-cover{display:block;width:100%;aspect-ratio:2.5/1;height:auto;object-fit:cover;object-position:center;background:#e8eaed}
.pf-svc{display:flex;flex-wrap:wrap;gap:.35em;padding:0 1.05em .7em}.pf-svc span{background:#f1f3f4;border-radius:.4em;padding:.25em .6em;font-size:.84em;color:#3c4043}
.pf-q{margin:0 1.05em 1em;padding:.7em .8em;border:1px solid #ebebeb;border-radius:.6em;font-size:.9em;color:#3c4043}.pf-q b{display:block;font-weight:600;color:#202124;margin-bottom:.2em}
.pf-g-head{display:flex;gap:.9em;align-items:center;padding:.9em 1.05em .4em}
.pf-g .pf-av{width:4em;height:4em}
.pf-g .pf-name{margin:0;font-size:1.3em;font-weight:400;line-height:1.2}
.pf-rev{display:block;color:#70757a;font-size:.92em}
.pf-rev::before{content:"\2605 ";color:#fbbc04}
.pf-acts{display:flex;gap:.45em;padding:.5em 1.05em .8em;overflow:hidden}
.pf-acts span{border:1px solid #dadce0;border-radius:2em;padding:.35em .8em;font-size:.86em;color:#1a73e8;white-space:nowrap}
.pf-g .pf-bio{padding:0 1.05em 1em;border-top:1px solid #ebebeb;padding-top:.7em;margin:0}
/* TikTok */
.pf-t-head{display:grid;justify-items:center;text-align:center;gap:.25em}
.pf-t .pf-av{width:6em;height:6em}
.pf-t .pf-handle{font-size:1.15em;margin-top:.4em}
.pf-t .pf-name{margin:0;color:var(--pf2);font-weight:400}
.pf-t .pf-counts{gap:1.4em;justify-content:center;margin:.5em 0}
.pf-t .pf-bio{text-align:center;margin:.4em auto .8em;max-width:20em}
/* Facebook */
.pf-f{padding:0}
.pf-f-head{display:grid;justify-items:start;padding:0 1.05em;margin-top:-2.6em;position:relative}
.pf-f .pf-av{width:5.4em;height:5.4em;box-shadow:0 0 0 .25em #fff}
.pf-f .pf-name{font-size:1.4em;margin-top:.35em;font-weight:700}
.pf-f .pf-bio{padding:.6em 1.05em 1em}
/* the frame draws itself: picture, name, highlights, bio, grid (about 1.6 s, once) */
.will-draw [data-d]{opacity:0;transform:translateY(.5em) scale(.985)}
.drawn [data-d]{opacity:1;transform:none;transition:opacity .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1)}
.drawn [data-d="1"]{transition-delay:.05s}.drawn [data-d="2"]{transition-delay:.4s}.drawn [data-d="3"]{transition-delay:.75s}.drawn [data-d="4"]{transition-delay:1.05s}.drawn [data-d="5"]{transition-delay:1.3s}
.drawn .pf-bars i{animation:pfbar 1.1s 1.2s both cubic-bezier(.23,1,.32,1);transform-origin:left}
@keyframes pfbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================================================================ BEFORE AND AFTER (one box, the size is reserved) */
.ba{position:relative;width:100%;max-width:400px;aspect-ratio:4/5.1;margin:0 auto;border-radius:28px;overflow:hidden;background:#111;
  box-shadow:0 0 0 7px #121114,0 0 0 8px rgba(235,222,208,.18),0 30px 60px -24px rgba(0,0,0,.85);container-type:inline-size;isolation:isolate;touch-action:pan-y}
.ba-side{position:absolute;inset:0;font-size:13px;font-size:3.55cqw}
.ba-before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#fff}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none;z-index:3}
.ba-line b{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ba-line b::before,.ba-line b::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-line b::before{left:8px;border-right-color:#111}.ba-line b::after{right:8px;border-left-color:#111}
/* the frame is the gesture surface (wireBeforeAfter): sideways drags move the divider from anywhere, vertical swipes
   scroll the page, a tap moves it there. The range below is for the keyboard and screen readers only. */
.ba{cursor:ew-resize;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ba img{-webkit-user-drag:none;pointer-events:none}
.ba.ba-glide .ba-before{transition:clip-path .24s cubic-bezier(.3,0,.1,1)}.ba.ba-glide .ba-line{transition:left .24s cubic-bezier(.3,0,.1,1)}
.ba.ba-drag .ba-line b{transform:scale(1.08)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;pointer-events:none;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible + .ba-line,.ba:focus-within .ba-line b{outline:3px solid var(--acid,#81ff28);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ba.ba-glide .ba-before,.ba.ba-glide .ba-line{transition:none}.ba.ba-drag .ba-line b{transform:none}}
.ba-lab{position:absolute;top:10px;z-index:2;background:rgba(8,8,10,.82);color:#ebded0;border-radius:6px;padding:5px 8px;font-size:9.5px!important;letter-spacing:.14em!important;pointer-events:none}
.ba-lab-b{left:10px}.ba-lab-a{right:10px}

/* ================================================================ OUR CHROME */
.el-kick{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.el-kick i{color:var(--orange);font-style:normal}
/* the number, recounted: an acid slab, ink numerals */
.el-count{background:var(--acid);color:#08080a;border-radius:var(--r);padding:18px 18px 16px;margin:18px 0 0;position:relative;overflow:hidden}
.el-count .el-kick{color:#08080a;opacity:.8}
.el-nums{display:flex;align-items:baseline;gap:14px;font-family:var(--disp);font-weight:900;letter-spacing:-.03em;line-height:.8;margin:8px 0 10px}
.el-nums .was{font-size:clamp(58px,17vw,96px);opacity:.42;text-decoration:line-through;text-decoration-thickness:6px}
.el-nums .arr{font-family:var(--body);font-size:34px;font-weight:700}
.el-nums .now{font-size:clamp(84px,25vw,140px)}
.el-count p{font-size:15.5px;line-height:1.45;margin:0;max-width:38ch;font-weight:500}
/* the parts a stranger looks for (2026-09-30): before payment, the ones missing today; after, the ones now on show */
.el-parts{list-style:none;margin:10px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.el-parts li{border:1.5px solid currentColor;border-radius:999px;padding:6px 11px;font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.el-parts li.on{background:#08080a;color:var(--acid);border-color:#08080a}
.el-parts li.miss{opacity:.6;border-style:dashed}
.el-head{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(30px,8.6vw,48px);margin:8px 0 4px;max-width:none}
.el-count .el-small{font-size:13.5px;line-height:1.4}
/* the one real line, in full, then the rest waiting and counted */
.el-line{margin:18px 0 0;border-radius:var(--r);padding:16px 16px 14px;position:relative}
.el-line blockquote{font-family:var(--body);font-size:19px;line-height:1.35;font-weight:600;margin:6px 0 12px}
.el-wait{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.4}
.el-wait .n{font-family:var(--disp);font-weight:900;font-size:40px;line-height:.8;letter-spacing:-.02em}
.el-wait .bars{flex:1;display:grid;gap:5px}
.el-wait .bars i{display:block;height:7px;border-radius:4px;background:currentColor;opacity:.16}
/* the policy sentence under every buy button */
.el-policy{font-size:13px;line-height:1.45;margin:10px 0 0}
/* tape on a render, the poster wall move */
.el-taped{position:relative}
.el-taped::before,.el-taped::after{content:"";position:absolute;width:74px;height:22px;background:rgba(240,232,210,.78);z-index:2;
  clip-path:polygon(2% 12%,8% 0,20% 8%,34% 0,48% 10%,62% 0,76% 8%,90% 0,98% 14%,100% 88%,92% 100%,78% 92%,64% 100%,50% 90%,36% 100%,22% 92%,8% 100%,0 86%)}
.el-taped::before{top:-9px;left:14%;transform:rotate(-6deg)}
.el-taped::after{top:-9px;right:12%;transform:rotate(5deg)}
@media (prefers-reduced-motion: reduce){.will-draw [data-d],.drawn [data-d]{opacity:1!important;transform:none!important;transition:none!important}.drawn .pf-bars i{animation:none}}