/* landing-disrupt-0924 - the book studio's sales page (signed-out view of
   studio.html). Everything is scoped to #signinCard.lp2 so the signed-in
   shelf, editor and checks are untouched. A dark press-room world: book
   pages are the only white things on it; magenta and cyan are the printer's
   registration colours. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;
  src:url(/static/lp2/fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/lp2/fonts/jetbrainsmono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* the page around it, only while the landing shows */
html:not(.has-key) body{background:#0a0c11}
html:not(.has-key) .topbar{display:none}
html:not(.has-key) body > .wrap{padding-bottom:0}
/* the page's own .topbar + .wrap gap: the landing now sits between them */
html.has-key #signinCard.lp2 + .wrap{padding-top:clamp(20px,3.6vw,40px)}
html:not(.has-key){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:not(.has-key){scroll-behavior:auto}}
#signinCard.lp2[hidden],html.has-key #signinCard.lp2{display:none!important}

#signinCard.lp2{
  --press:#0a0c11; --plate:#121620; --plate-2:#171c28; --rule:#262c3b; --rule-2:#343b4e;
  --ink:#f4f2ec; --mute:#a3aab9; --faint:#838b9c;   /* v2-access-0925: 4.25:1 -> 5.0:1 or more */
  --paper:#f7f3e8; --paper-ink:#1d1b17;
  --mag:#ff2e88; --mag-soft:rgba(255,46,136,.14); --cyan:#22c7ff; --cyan-soft:rgba(34,199,255,.12);
  --ok:#35d98a;
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --book:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  display:block;position:relative;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--press);color:var(--ink);font:400 17px/1.6 var(--body);overflow:visible;
  -webkit-font-smoothing:antialiased;
}
#signinCard.lp2 *{box-sizing:border-box}
#signinCard.lp2 :is(h1,h2,h3,p,ul,ol,li,figure,figcaption,table,th,td,details,summary,nav,header,footer,article,form){margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
#signinCard.lp2 :is(ul,ol){list-style:none}
#signinCard.lp2 a{color:var(--cyan);text-decoration:none}
#signinCard.lp2 a:hover{text-decoration:underline}
#signinCard.lp2 img{display:block;max-width:100%;height:auto}
#signinCard.lp2 :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#signinCard.lp2 b{font-weight:700}

/* buttons and the email box */
#signinCard.lp2 .l2-btn{font:700 17px/1 var(--body);letter-spacing:.01em;padding:17px 26px;border:0;border-radius:999px;
  background:var(--mag);color:#0a0c11;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 0 rgba(255,46,136,.5),0 10px 30px -8px rgba(255,46,136,.55);transition:transform .18s,box-shadow .18s}
#signinCard.lp2 .l2-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(255,46,136,.16),0 14px 34px -8px rgba(255,46,136,.7)}
#signinCard.lp2 .l2-btn:active{transform:translateY(1px)}
#signinCard.lp2 .l2-btn-sm{padding:11px 18px;font-size:15px}
#signinCard.lp2 .l2-btn-wide{width:100%;padding:19px 26px;font-size:18px}
#signinCard.lp2 .l2-form{display:flex;gap:8px;padding:7px;border-radius:999px;background:var(--plate);border:1px solid var(--rule-2);max-width:540px;
  transition:border-color .2s,box-shadow .2s}
#signinCard.lp2 .l2-form:focus-within{border-color:var(--mag);box-shadow:0 0 0 5px var(--mag-soft)}
#signinCard.lp2 .l2-form input{flex:1 1 auto;min-width:0;font:400 17px/1.2 var(--body);color:var(--ink);background:transparent;border:0;outline:0;padding:0 18px;box-shadow:none;margin:0}
#signinCard.lp2 .l2-form input::placeholder{color:var(--faint)}
/* a jump to the email box (nav and price buttons) must not land it under the sticky nav */
#signinCard.lp2 #email{scroll-margin-top:140px}
#signinCard.lp2 .l2-form button{flex:0 0 auto}

/* nav */
#signinCard.lp2 .l2-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;padding:14px max(16px,calc((100% - 1200px)/2));
  background:rgba(10,12,17,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s}
#signinCard.lp2 .l2-nav.is-stuck{border-bottom-color:var(--rule)}
#signinCard.lp2 .l2-mark{font:800 19px/1 var(--display);color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-right:auto}
#signinCard.lp2 .l2-mark i{font-style:normal;color:var(--mag)}
#signinCard.lp2 .l2-mark .tag{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:5px 8px;border:1px solid var(--rule-2);border-radius:999px}
#signinCard.lp2 .l2-mark:hover{text-decoration:none}
#signinCard.lp2 .l2-links{display:flex;gap:24px}
#signinCard.lp2 .l2-links a{color:var(--mute);font-size:15px;font-weight:500}
#signinCard.lp2 .l2-links a:hover{color:var(--ink);text-decoration:none}

/* shared section frame */
#signinCard.lp2 .l2-in{max-width:1200px;margin:0 auto;padding:0 16px}
#signinCard.lp2 .l2-narrow{max-width:820px}
#signinCard.lp2 .l2-sec{position:relative;padding:clamp(64px,8.5vw,112px) 0;border-top:1px solid var(--rule)}
#signinCard.lp2 .l2-kicker{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 18px;display:flex;align-items:center;gap:10px}
#signinCard.lp2 .l2-kicker::before{content:"";width:18px;height:1px;background:var(--cyan)}
#signinCard.lp2 .l2-h2{font:800 clamp(34px,5vw,68px)/1 var(--display);letter-spacing:-.04em;color:var(--ink);max-width:18ch;text-wrap:balance;margin:0 0 22px}
#signinCard.lp2 .l2-sub{color:var(--mute);font-size:clamp(17px,1.5vw,19px);max-width:60ch;margin:0 0 16px}
#signinCard.lp2 .l2-source{color:var(--faint);font-size:13px;max-width:80ch;margin-top:22px}

/* hero */
#signinCard.lp2 .l2-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center;
  max-width:1200px;margin:0 auto;padding:clamp(28px,4.2vw,60px) 16px clamp(56px,7vw,96px)}
#signinCard.lp2 .l2-bloom{position:absolute;inset:-10% 0 0 0;pointer-events:none;z-index:0;opacity:.9;
  background:radial-gradient(38% 42% at 78% 38%,rgba(255,46,136,.22),transparent 70%),radial-gradient(30% 36% at 62% 72%,rgba(34,199,255,.16),transparent 70%);
  animation:l2drift 18s ease-in-out infinite alternate}
@keyframes l2drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
#signinCard.lp2 .l2-hero-copy{position:relative;z-index:2}
#signinCard.lp2 .l2-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:9px 14px;border:1px solid var(--rule-2);border-radius:999px;background:rgba(255,255,255,.03);margin:0 0 22px}
#signinCard.lp2 .l2-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(53,217,138,.6);animation:l2pulse 2.2s infinite}
@keyframes l2pulse{70%{box-shadow:0 0 0 9px rgba(53,217,138,0)}100%{box-shadow:0 0 0 0 rgba(53,217,138,0)}}
#signinCard.lp2 .l2-h1{font:800 clamp(44px,6.1vw,92px)/.92 var(--display);letter-spacing:-.05em;color:var(--ink);margin:0 0 22px;text-wrap:balance}
#signinCard.lp2 .l2-line{display:block}
#signinCard.lp2 .l2-line-2{color:var(--ink)}
#signinCard.lp2 .l2-h1 em{font-style:normal;color:var(--mag);position:relative;white-space:nowrap}
#signinCard.lp2 .l2-h1 em::after{content:"";position:absolute;left:.02em;right:.12em;bottom:.02em;height:.09em;border-radius:1em;background:var(--mag);
  transform-origin:left;animation:l2under 1s .6s cubic-bezier(.7,0,.2,1) both}
@keyframes l2under{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#signinCard.lp2 .l2-lede{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--mute);max-width:54ch;margin:0 0 26px}
#signinCard.lp2 .l2-lede b{color:var(--ink)}
#signinCard.lp2 .l2-micro{font-size:14.5px;color:var(--mute);margin:14px 0 0;max-width:56ch}
#signinCard.lp2 .l2-micro-dim{color:var(--faint);margin-top:6px}
#signinCard.lp2 .l2-micro b{color:var(--mute)}
/* the studio's own sign-in messages land inside the form (after #signin) */
#signinCard.lp2 .l2-form{flex-wrap:wrap}
#signinCard.lp2 .l2-form:has(> p){border-radius:22px}
#signinCard.lp2 .l2-form > p{flex:1 1 100%;margin:4px 0 6px!important;padding:8px 14px;border-radius:14px;background:var(--mag-soft);color:var(--ink);font-size:15px;line-height:1.45}
#signinCard.lp2 .l2-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0}
#signinCard.lp2 .l2-trust li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
#signinCard.lp2 .l2-trust svg,#signinCard.lp2 .st-chips svg,#signinCard.lp2 .l2-report svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the press (hero stage). Default state = finished page; data-s drives the loop. */
#signinCard.lp2 .l2-stage{position:relative;z-index:1;aspect-ratio:4/5;width:100%;max-width:480px;justify-self:center;container-type:inline-size;perspective:1600px}
#signinCard.lp2 .st-frame{position:absolute;inset:4% 9% 12% 9%;transform:rotateY(-13deg) rotateX(5deg) rotateZ(1deg);transform-style:preserve-3d;
  animation:l2float 7s ease-in-out infinite alternate}
@keyframes l2float{to{transform:rotateY(-8deg) rotateX(3deg) rotateZ(0deg) translateY(-1.5%)}}
#signinCard.lp2 .st-sheet{position:absolute;inset:0;border-radius:2px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.2)}
#signinCard.lp2 .st-doc{background:#fbfbfa;color:#26272b;font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif}
#signinCard.lp2 .doc-bar{display:flex;align-items:center;gap:1.2cqw;height:7.5cqw;padding:0 3cqw;background:#185abd;color:#fff}
#signinCard.lp2 .doc-bar i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:rgba(255,255,255,.55)}
#signinCard.lp2 .doc-bar b{font:600 2.5cqw/1 "Segoe UI",Arial,sans-serif;margin-left:2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#signinCard.lp2 .doc-ruler{height:3.2cqw;background:repeating-linear-gradient(90deg,#d9dbe0 0 1px,transparent 1px 2.6cqw),#f1f2f4;border-bottom:1px solid #d9dbe0}
#signinCard.lp2 .doc-body{padding:5cqw 6.5cqw}
#signinCard.lp2 .doc-body p{font-size:3.05cqw;line-height:1.5;margin:0 0 2.4cqw;text-align:left;color:#26272b}
#signinCard.lp2 .doc-body .doc-h{font-weight:700;font-size:3.5cqw;color:#1f3b73}
#signinCard.lp2 .doc-body u{text-decoration:underline wavy #e5484d;text-decoration-thickness:.3cqw;text-underline-offset:.7cqw;white-space:pre-wrap}
#signinCard.lp2 .st-book{background:var(--paper);color:var(--paper-ink);padding:7cqw 8cqw 6cqw 9cqw;font-family:var(--book);clip-path:inset(0 0 0 0)}
#signinCard.lp2 .bk-head{font:italic 1.9cqw/1 var(--book);letter-spacing:.06em;text-transform:uppercase;color:#6b665c;border-bottom:1px solid #d9d2c1;padding-bottom:1.4cqw;margin:0 0 7cqw}
#signinCard.lp2 .bk-kicker{font:400 1.9cqw/1 var(--book);letter-spacing:.14em;text-transform:uppercase;color:#6f6a5c;text-align:center;margin:0 0 2cqw}
#signinCard.lp2 .bk-title{font:700 4.4cqw/1.12 var(--book);text-align:center;color:#141310;margin:0 auto 5cqw;max-width:26ch;text-wrap:balance}
#signinCard.lp2 .bk-p{font-size:2.75cqw;line-height:1.52;text-align:justify;hyphens:auto;text-indent:4cqw;margin:0;color:#1d1b17}
#signinCard.lp2 .bk-first{text-indent:0}
#signinCard.lp2 .bk-cap{float:left;font:700 9.4cqw/.8 var(--book);margin:.9cqw 1.3cqw 0 0;color:#141310}
#signinCard.lp2 .bk-folio{position:absolute;left:0;right:0;bottom:4cqw;text-align:center;font-size:2.2cqw;color:#6f6a5c}
#signinCard.lp2 .bk-gutter{position:absolute;left:0;top:34%;width:9cqw;height:0;border-top:1px dashed var(--cyan);opacity:1}
#signinCard.lp2 .bk-gutter::before,#signinCard.lp2 .bk-gutter::after{content:"";position:absolute;top:-1.1cqw;width:1px;height:2.2cqw;background:var(--cyan)}
#signinCard.lp2 .bk-gutter::before{left:0}#signinCard.lp2 .bk-gutter::after{right:0}
#signinCard.lp2 .bk-gutter b{position:absolute;left:50%;top:-4.4cqw;transform:translateX(-50%);font:600 1.9cqw/1 var(--mono);color:#0b6f94;background:rgba(247,243,232,.92);padding:.5cqw .8cqw;border-radius:.6cqw;white-space:nowrap}
#signinCard.lp2 .st-beam{position:absolute;left:-5%;right:-5%;top:100%;height:2px;opacity:0;background:var(--mag);
  box-shadow:0 0 14px 3px rgba(255,46,136,.85),0 0 40px 10px rgba(255,46,136,.35);pointer-events:none}
#signinCard.lp2 .st-beam::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:14cqw;background:linear-gradient(to top,rgba(255,46,136,.22),transparent)}
#signinCard.lp2 .st-crop{position:absolute;width:6cqw;height:6cqw;border-color:var(--cyan);border-style:solid;border-width:0;opacity:.9;transition:opacity .5s,transform .5s}
#signinCard.lp2 .c-tl{left:-4cqw;top:-4cqw;border-right-width:1px;border-bottom-width:1px}
#signinCard.lp2 .c-tr{right:-4cqw;top:-4cqw;border-left-width:1px;border-bottom-width:1px}
#signinCard.lp2 .c-bl{left:-4cqw;bottom:-4cqw;border-right-width:1px;border-top-width:1px}
#signinCard.lp2 .c-br{right:-4cqw;bottom:-4cqw;border-left-width:1px;border-top-width:1px}
#signinCard.lp2 .st-reg{position:absolute;right:-8.5cqw;top:22%;width:5cqw;height:5cqw;border:1px solid var(--mag);border-radius:50%;transition:opacity .5s,transform .6s}
#signinCard.lp2 .st-reg::before,#signinCard.lp2 .st-reg::after{content:"";position:absolute;background:var(--mag)}
#signinCard.lp2 .st-reg::before{left:50%;top:-1.5cqw;bottom:-1.5cqw;width:1px}
#signinCard.lp2 .st-reg::after{top:50%;left:-1.5cqw;right:-1.5cqw;height:1px}
#signinCard.lp2 .st-chips{position:absolute;left:0;bottom:17%;display:grid;gap:1.6cqw;z-index:3}
#signinCard.lp2 .st-chips li{display:flex;align-items:center;gap:1.8cqw;font:500 max(12px,2.7cqw)/1.2 var(--body);color:var(--ink);white-space:nowrap;
  padding:2cqw 2.8cqw;border-radius:2.4cqw;background:rgba(18,22,32,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rule-2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
#signinCard.lp2 .st-chips li b{font:600 max(11px,2.4cqw)/1 var(--mono);color:var(--ok);margin-left:.6cqw}
#signinCard.lp2 .st-chips li:nth-child(2){margin-left:6cqw}
#signinCard.lp2 .st-chips li:nth-child(3){margin-left:2cqw}
#signinCard.lp2 .st-files{position:absolute;right:2%;bottom:0;display:flex;gap:1.6cqw;z-index:3}
#signinCard.lp2 .st-files li{display:grid;place-items:center;gap:.6cqw;width:15cqw;padding:2.2cqw 0 1.8cqw;border-radius:2cqw;background:var(--plate-2);border:1px solid var(--rule-2);
  font:500 max(10px,1.9cqw)/1 var(--body);color:var(--mute);text-align:center;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
#signinCard.lp2 .st-files li b{font:700 max(11px,2.6cqw)/1 var(--mono);color:var(--ink)}
#signinCard.lp2 .st-files li:nth-child(1) b{color:var(--mag)}#signinCard.lp2 .st-files li:nth-child(2) b{color:var(--cyan)}
#signinCard.lp2 .st-files li:nth-child(3) b{color:#ffd23f}#signinCard.lp2 .st-files li:nth-child(4) b{color:var(--ok)}

/* the loop */
#signinCard.lp2 .l2-stage.snap *{transition:none!important}
#signinCard.lp2 .l2-stage[data-s="0"] .st-book{clip-path:inset(0 0 100% 0)}
#signinCard.lp2 .l2-stage[data-s="0"] .st-beam{top:0;opacity:0}
#signinCard.lp2 .l2-stage[data-s="1"] .st-book{clip-path:inset(0 0 0 0);transition:clip-path 2.4s cubic-bezier(.45,.05,.55,.95)}
#signinCard.lp2 .l2-stage[data-s="1"] .st-beam{top:100%;opacity:1;transition:top 2.4s cubic-bezier(.45,.05,.55,.95),opacity .2s}
#signinCard.lp2 .l2-stage:is([data-s="0"],[data-s="1"]) :is(.st-crop,.st-reg,.bk-gutter){opacity:0;transform:scale(.6)}
#signinCard.lp2 .l2-stage:is([data-s="0"],[data-s="1"]) .st-chips li{opacity:0;transform:translateX(-4cqw)}
#signinCard.lp2 .l2-stage:is([data-s="0"],[data-s="1"],[data-s="2"]) .st-files li{opacity:0;transform:translateY(5cqw) scale(.9)}
#signinCard.lp2 .l2-stage[data-s="2"] .st-beam,#signinCard.lp2 .l2-stage[data-s="3"] .st-beam{opacity:0;transition:opacity .4s}
#signinCard.lp2 .bk-gutter{transition:opacity .5s .2s,transform .5s .2s}
#signinCard.lp2 .st-chips li:nth-child(2){transition-delay:.18s}#signinCard.lp2 .st-chips li:nth-child(3){transition-delay:.36s}
#signinCard.lp2 .st-files li:nth-child(2){transition-delay:.12s}#signinCard.lp2 .st-files li:nth-child(3){transition-delay:.24s}#signinCard.lp2 .st-files li:nth-child(4){transition-delay:.36s}

/* ticker */
#signinCard.lp2 .l2-ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--plate);padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#signinCard.lp2 .l2-ticker-track{display:flex;width:max-content;animation:l2tick 48s linear infinite}
#signinCard.lp2 .l2-ticker span{display:flex;align-items:center;gap:28px;padding-right:28px;font:700 clamp(18px,2vw,24px)/1 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
#signinCard.lp2 .l2-ticker span::after{content:"";width:9px;height:9px;background:var(--mag);transform:rotate(45deg)}
#signinCard.lp2 .l2-ticker span:nth-child(3n)::after{background:var(--cyan)}
@keyframes l2tick{to{transform:translateX(-50%)}}

/* manifesto + price rundown */
#signinCard.lp2 .l2-manifesto .l2-h2{max-width:20ch}
#signinCard.lp2 .l2-rundown{margin-top:44px;border-top:1px solid var(--rule)}
#signinCard.lp2 .rd-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
#signinCard.lp2 .rd-who{font:600 clamp(17px,1.8vw,22px)/1.2 var(--body);color:var(--ink)}
#signinCard.lp2 .rd-who small{display:block;font:400 14px/1.4 var(--body);color:var(--faint);margin-top:4px}
#signinCard.lp2 .rd-amt{font:800 clamp(30px,4.4vw,58px)/1 var(--display);letter-spacing:-.04em;color:var(--mute);text-decoration:none;position:relative;white-space:nowrap;font-variant-numeric:tabular-nums}
#signinCard.lp2 s.rd-amt::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.09em;background:var(--mag);border-radius:1em;transform:rotate(-4deg)}
#signinCard.lp2 [data-rundown][data-play] s.rd-amt::after{animation:l2strike .55s cubic-bezier(.7,0,.2,1) both}
#signinCard.lp2 [data-rundown][data-play] .rd-row:nth-child(2) s.rd-amt::after{animation-delay:.35s}
#signinCard.lp2 [data-rundown][data-play] .rd-row:nth-child(3) s.rd-amt::after{animation-delay:.7s}
@keyframes l2strike{from{transform:rotate(-4deg) scaleX(0);transform-origin:left}to{transform:rotate(-4deg) scaleX(1);transform-origin:left}}
#signinCard.lp2 .rd-us{border-bottom:0;padding:30px 24px;margin-top:14px;border-radius:18px;background:linear-gradient(100deg,rgba(255,46,136,.16),rgba(34,199,255,.08));border:1px solid rgba(255,46,136,.45)}
#signinCard.lp2 .rd-us .rd-amt{color:var(--ink);font-size:clamp(46px,7vw,96px);text-shadow:0 0 40px rgba(255,46,136,.45)}
#signinCard.lp2 [data-rundown][data-play] .rd-us .rd-amt{animation:l2pop .7s 1.15s cubic-bezier(.2,1.4,.3,1) both}
@keyframes l2pop{from{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}

/* steps */
#signinCard.lp2 .l2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px;counter-reset:none}
#signinCard.lp2 .l2-steps li{position:relative;padding:30px 26px 28px;border-radius:18px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .l2-stepn{display:block;font:800 88px/.8 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #525b73;margin:0 0 22px}
#signinCard.lp2 .l2-steps li:hover .l2-stepn{-webkit-text-stroke-color:var(--mag)}
#signinCard.lp2 .l2-steps h3{font:700 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
#signinCard.lp2 .l2-steps p{color:var(--mute);font-size:16px}

/* proof */
#signinCard.lp2 .l2-spread{margin-top:40px}
#signinCard.lp2 .l2-spread-img{position:relative;padding:clamp(14px,3vw,34px);border-radius:20px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .l2-spread-img img{border-radius:4px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
#signinCard.lp2 .l2-pin{position:absolute;transform:translate(-6px,-50%);display:flex;align-items:center;gap:8px;pointer-events:none}
#signinCard.lp2 .l2-pin::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 5px rgba(255,46,136,.25);animation:l2pulse2 2.4s infinite}
#signinCard.lp2 .l2-pin b{font:600 13px/1 var(--mono);color:#0a0c11;background:var(--ink);padding:7px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
#signinCard.lp2 .l2-pin-r{flex-direction:row-reverse;transform:translate(calc(-100% + 6px),-50%)}
@keyframes l2pulse2{50%{box-shadow:0 0 0 10px rgba(255,46,136,0)}}
#signinCard.lp2 .l2-spread figcaption,#signinCard.lp2 .l2-covers figcaption{color:var(--faint);font-size:14px;margin-top:14px}
#signinCard.lp2 .l2-legend,#signinCard.lp2 .l2-swipe{display:none}
#signinCard.lp2 .l2-covers{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;margin-top:22px;align-items:end}
#signinCard.lp2 .l2-covers figure{padding:clamp(14px,2.4vw,28px);border-radius:20px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .l2-covers img{border-radius:3px}
#signinCard.lp2 .l2-cover3d{perspective:1000px}
#signinCard.lp2 .l2-cover3d figcaption{margin-top:30px}
#signinCard.lp2 .l2-cover3d img{transform:rotateY(-22deg) rotateX(4deg);box-shadow:24px 30px 60px -20px rgba(0,0,0,.85),inset 6px 0 10px rgba(255,255,255,.12);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#signinCard.lp2 .l2-cover3d:hover img{transform:rotateY(0) rotateX(0) scale(1.02)}

/* checks */
#signinCard.lp2 .l2-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
#signinCard.lp2 .l2-report{position:relative;overflow:hidden;border-radius:20px;background:var(--plate);border:1px solid var(--rule);padding:26px 26px 22px}
#signinCard.lp2 .rp-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding-bottom:16px;border-bottom:1px solid var(--rule);margin:0 0 6px}
#signinCard.lp2 .rp-head b{font:700 17px/1.3 var(--book);color:var(--ink)}
#signinCard.lp2 .rp-head span{font:500 12px/1.6 var(--mono);color:var(--faint);letter-spacing:.04em}
#signinCard.lp2 .l2-report li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;padding:13px 0;border-bottom:1px solid var(--rule)}
#signinCard.lp2 .l2-report li:last-child{border-bottom:0}
#signinCard.lp2 .l2-report li svg{grid-row:span 2;margin-top:2px}
#signinCard.lp2 .l2-report li b{font:600 16px/1.35 var(--body);color:var(--ink)}
#signinCard.lp2 .l2-report li span{font-size:14.5px;color:var(--mute)}
#signinCard.lp2 .rp-foot{margin-top:14px;font:500 13px/1.5 var(--mono);color:var(--cyan)}
#signinCard.lp2 .l2-report svg path{stroke-dasharray:24;stroke-dashoffset:0}
#signinCard.lp2 [data-report][data-play] li svg path{animation:l2tickdraw .45s ease-out both}
#signinCard.lp2 [data-report][data-play] li:nth-child(2) svg path{animation-delay:.25s}
#signinCard.lp2 [data-report][data-play] li:nth-child(3) svg path{animation-delay:.5s}
#signinCard.lp2 [data-report][data-play] li:nth-child(4) svg path{animation-delay:.75s}
#signinCard.lp2 [data-report][data-play] li:nth-child(5) svg path{animation-delay:1s}
#signinCard.lp2 [data-report][data-play] li:nth-child(6) svg path{animation-delay:1.25s}
#signinCard.lp2 [data-report][data-play] li:nth-child(7) svg path{animation-delay:1.5s}
@keyframes l2tickdraw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
#signinCard.lp2 .l2-report::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cyan);box-shadow:0 0 16px 3px rgba(34,199,255,.6);opacity:0}
#signinCard.lp2 [data-report][data-play]::after{animation:l2scan 1.9s cubic-bezier(.45,.05,.55,.95) both}
@keyframes l2scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
#signinCard.lp2 .l2-gauge{margin-top:30px;padding:22px;border-radius:18px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .g-page{position:relative;height:74px;border-radius:4px;background:var(--paper);overflow:hidden}
#signinCard.lp2 .g-min{position:absolute;left:0;top:0;bottom:0;width:62.5%;background:repeating-linear-gradient(135deg,rgba(255,46,136,.26) 0 7px,rgba(255,46,136,.1) 7px 14px);border-right:2px solid var(--mag)}
#signinCard.lp2 .g-text{position:absolute;left:74.5%;right:0;top:14px;bottom:14px;background:repeating-linear-gradient(to bottom,#3b3831 0 3px,transparent 3px 11px);opacity:.75}
#signinCard.lp2 .g-text::before{content:"";position:absolute;left:0;top:-14px;bottom:-14px;width:2px;background:var(--cyan)}
#signinCard.lp2 [data-gauge][data-play] .g-text{animation:l2slide 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
#signinCard.lp2 [data-gauge][data-play] .g-min{animation:l2grow .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes l2slide{from{left:40%;opacity:0}to{left:74.5%;opacity:.75}}
@keyframes l2grow{from{width:0}to{width:62.5%}}
#signinCard.lp2 .g-cap{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
#signinCard.lp2 .g-scale{position:relative;height:22px;margin-top:10px;font:500 13px/1.3 var(--mono);color:var(--mute)}
#signinCard.lp2 .g-scale span{position:absolute;top:0;white-space:nowrap}
#signinCard.lp2 .g-a{right:37.5%;text-align:right}
#signinCard.lp2 .g-b{left:74.5%;padding-left:8px}
#signinCard.lp2 .g-a b{color:var(--mag)}#signinCard.lp2 .g-b b{color:var(--cyan)}

/* bento */
#signinCard.lp2 .l2-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
#signinCard.lp2 .l2-bento article{position:relative;padding:26px 24px;border-radius:18px;background:var(--plate);border:1px solid var(--rule);overflow:hidden;transition:border-color .25s,transform .25s}
#signinCard.lp2 .l2-bento article::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,46,136,.16),transparent 70%)}
#signinCard.lp2 .l2-bento article:hover{border-color:rgba(255,46,136,.5);transform:translateY(-3px)}
#signinCard.lp2 .l2-bento article:hover::before{opacity:1}
#signinCard.lp2 .l2-bento .b-wide{grid-column:span 2}
#signinCard.lp2 .l2-tag{display:inline-block;font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--cyan);border:1px solid rgba(34,199,255,.4);background:var(--cyan-soft);padding:6px 9px;border-radius:6px;margin:0 0 16px}
#signinCard.lp2 .l2-bento h3{font:700 21px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
#signinCard.lp2 .l2-bento p{color:var(--mute);font-size:15.5px}

/* guarantees */
#signinCard.lp2 .l2-guarantee{background:radial-gradient(60% 80% at 50% 0%,rgba(255,46,136,.12),transparent 70%)}
#signinCard.lp2 .l2-seals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
#signinCard.lp2 .l2-seal{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center;padding:28px;border-radius:22px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .seal-ring{position:relative;width:132px;height:132px;display:grid;place-items:center}
#signinCard.lp2 .seal-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:l2spin 26s linear infinite}
#signinCard.lp2 .seal-ring text{font:600 9.2px/1 var(--mono);letter-spacing:.12em;fill:var(--ink)}
#signinCard.lp2 .seal-ring span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--mag);color:#0a0c11;font:800 30px/1 var(--display);letter-spacing:-.03em;box-shadow:0 0 40px rgba(255,46,136,.45)}
#signinCard.lp2 .l2-seal:nth-child(2) .seal-ring span{background:var(--cyan);box-shadow:0 0 40px rgba(34,199,255,.4)}
@keyframes l2spin{to{transform:rotate(360deg)}}
#signinCard.lp2 .l2-seal h3{font:700 24px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
#signinCard.lp2 .l2-seal p{color:var(--mute);font-size:16px}

/* table */
#signinCard.lp2 .l2-tablewrap{overflow-x:auto;margin-top:36px;border-radius:18px;border:1px solid var(--rule);background:var(--plate)}
#signinCard.lp2 .l2-table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
#signinCard.lp2 .l2-table :is(th,td){display:table-cell;text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--rule);color:var(--mute)}
#signinCard.lp2 .l2-table tr:last-child :is(th,td){border-bottom:0}
#signinCard.lp2 .l2-table thead th{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
#signinCard.lp2 .l2-table tbody th{color:var(--ink);font:600 15px/1.45 var(--body);text-transform:none;letter-spacing:0;width:22%}
#signinCard.lp2 .l2-table .us{background:rgba(255,46,136,.08);color:var(--ink);border-left:1px solid rgba(255,46,136,.35);border-right:1px solid rgba(255,46,136,.35)}
#signinCard.lp2 .l2-table thead .us{color:var(--mag)}
#signinCard.lp2 .t-yes{color:var(--ok);font-weight:700}
#signinCard.lp2 .t-no{color:var(--faint)}

/* price */
#signinCard.lp2 .l2-pricesec{background:linear-gradient(180deg,transparent,rgba(34,199,255,.05))}
#signinCard.lp2 .l2-pricegrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start}
#signinCard.lp2 .l2-pricecard{position:relative;padding:clamp(26px,4vw,44px);border-radius:26px;background:var(--plate);border:1px solid rgba(255,46,136,.5);
  box-shadow:0 0 0 1px rgba(255,46,136,.15),0 40px 120px -50px rgba(255,46,136,.55)}
#signinCard.lp2 .l2-amount{font:800 clamp(88px,13vw,168px)/.85 var(--display);letter-spacing:-.06em;color:var(--ink);display:flex;align-items:flex-start;margin:8px 0 12px}
#signinCard.lp2 .l2-amount .cur{font-size:.42em;margin:.12em .05em 0 0;color:var(--mag)}
#signinCard.lp2 .l2-amount .p{font-size:.42em;margin-top:.12em;letter-spacing:-.01em}
#signinCard.lp2 .l2-per{color:var(--mute);margin:0 0 24px}
#signinCard.lp2 .l2-ticks{display:grid;gap:10px;margin:0 0 28px}
#signinCard.lp2 .l2-ticks li{position:relative;padding-left:30px;color:var(--ink)}
#signinCard.lp2 .l2-ticks li::before{content:"";position:absolute;left:4px;top:.35em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
#signinCard.lp2 .l2-fine{color:var(--faint);font-size:14px;margin-top:14px}
#signinCard.lp2 .l2-service{padding:clamp(24px,3.5vw,36px);border-radius:26px;background:var(--plate);border:1px solid var(--rule)}
#signinCard.lp2 .l2-service h3{font:700 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
#signinCard.lp2 .l2-service p{color:var(--mute);margin:0 0 12px}
#signinCard.lp2 .l2-fit-h{margin-top:26px!important;padding-top:24px;border-top:1px solid var(--rule)!important}
#signinCard.lp2 .l2-fit{display:grid;gap:8px;margin:6px 0 4px}
#signinCard.lp2 .l2-fit li{position:relative;padding-left:22px;color:var(--ink)}
#signinCard.lp2 .l2-fit li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--cyan);transform:rotate(45deg)}

/* faq */
#signinCard.lp2 .l2-faq details{border-bottom:1px solid var(--rule)}
#signinCard.lp2 .l2-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:700 clamp(18px,1.8vw,21px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
#signinCard.lp2 .l2-faq summary::-webkit-details-marker{display:none}
#signinCard.lp2 .l2-faq summary::after{content:"+";flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);font:400 22px/1 var(--body);color:var(--mag);transition:transform .25s}
#signinCard.lp2 .l2-faq details[open] summary::after{transform:rotate(45deg)}
#signinCard.lp2 .l2-faq details p{color:var(--mute);padding:0 0 22px;max-width:68ch}

/* final */
#signinCard.lp2 .l2-final{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,12vw,150px) 16px;border-top:1px solid var(--rule)}
#signinCard.lp2 .l2-bloom-2{inset:0;background:radial-gradient(40% 60% at 50% 60%,rgba(255,46,136,.22),transparent 70%),radial-gradient(30% 40% at 30% 30%,rgba(34,199,255,.12),transparent 70%)}
#signinCard.lp2 .l2-final .l2-h2{position:relative;margin:0 auto 18px;max-width:16ch;font-size:clamp(40px,6.4vw,92px)}
#signinCard.lp2 .l2-final > p{position:relative;color:var(--mute);font-size:clamp(17px,1.6vw,20px);max-width:52ch;margin:0 auto 30px}
#signinCard.lp2 .l2-form-final{position:relative;margin:0 auto}

/* footer */
#signinCard.lp2 .l2-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;max-width:1200px;margin:0 auto;padding:30px 16px 44px;border-top:1px solid var(--rule);color:var(--faint);font-size:14px}
#signinCard.lp2 .l2-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
#signinCard.lp2 .l2-foot a{color:var(--mute)}


/* film-0924: the Higgsfield films. Desktop: the hero film fills the band behind the
   headline, the book on the right. Phones: the headline and email box first, the film
   straight after. The poster (same frame the film starts and ends on) is a CSS
   background, so the page is finished before any video loads. */
#signinCard.lp2 .l2-herowrap{position:relative;overflow:hidden;isolation:isolate}
#signinCard.lp2 .l2-film{position:absolute;inset:0;z-index:0;background:#0a0c11 url(/static/lp2/film/hero-desk.jpg) 70% 50%/cover no-repeat}
#signinCard.lp2 .l2-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,12,17,.97) 0%,rgba(10,12,17,.9) 30%,rgba(10,12,17,.35) 52%,rgba(10,12,17,0) 66%),
             linear-gradient(0deg,rgba(10,12,17,1) 0%,rgba(10,12,17,0) 22%),linear-gradient(180deg,rgba(10,12,17,.7) 0%,rgba(10,12,17,0) 16%)}
#signinCard.lp2 .l2-film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity 1.2s ease}
#signinCard.lp2 .l2-film-v.is-on{opacity:1}
#signinCard.lp2 .l2-herowrap .l2-hero{position:relative;z-index:2;grid-template-columns:minmax(0,640px);min-height:min(86vh,820px);align-content:center}
#signinCard.lp2 .l2-film-final{background-image:url(/static/lp2/film/river-desk.jpg);opacity:.5}
#signinCard.lp2 .l2-film-final::after{background:radial-gradient(70% 70% at 50% 55%,rgba(10,12,17,.55),rgba(10,12,17,.94) 70%),linear-gradient(0deg,rgba(10,12,17,1) 0%,rgba(10,12,17,0) 30%)}
#signinCard.lp2 .l2-final > :not(.l2-film):not(.l2-bloom){position:relative;z-index:2}

/* the demo, now its own section */
#signinCard.lp2 .l2-press-in{align-items:center}
#signinCard.lp2 .l2-press-steps{display:grid;gap:14px;margin-top:28px;counter-reset:ps}
#signinCard.lp2 .l2-press-steps li{position:relative;padding:0 0 0 52px;counter-increment:ps}
#signinCard.lp2 .l2-press-steps li::before{content:counter(ps);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font:700 15px/1 var(--mono);color:var(--mag);border:1px solid rgba(255,46,136,.5);background:var(--mag-soft)}
#signinCard.lp2 .l2-press-steps b{display:block;font:700 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
#signinCard.lp2 .l2-press-steps span{color:var(--mute);font-size:15.5px}

@media (max-width:1020px){
  #signinCard.lp2 .l2-herowrap{display:flex;flex-direction:column;overflow:visible}
  #signinCard.lp2 .l2-herowrap .l2-hero{order:1;min-height:0;padding-bottom:28px}
  #signinCard.lp2 .l2-film{order:2;position:relative;inset:auto;margin:0 16px 56px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;
    background-image:url(/static/lp2/film/hero-phone.jpg);background-position:50% 55%;border:1px solid var(--rule-2);
    box-shadow:0 40px 90px -40px rgba(255,46,136,.45)}
  #signinCard.lp2 .l2-film::after{background:linear-gradient(0deg,rgba(10,12,17,.35) 0%,rgba(10,12,17,0) 30%)}
  #signinCard.lp2 .l2-film-v{object-position:50% 55%}
  #signinCard.lp2 .l2-film-final{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;background-image:url(/static/lp2/film/river-desk.jpg);background-position:60% 50%}
  #signinCard.lp2 .l2-press-in .l2-stage{margin-top:36px}
}
@media (min-width:1021px) and (max-width:1200px){
  #signinCard.lp2 .l2-film::after{background:linear-gradient(90deg,rgba(10,12,17,.97) 0%,rgba(10,12,17,.92) 40%,rgba(10,12,17,.4) 62%,rgba(10,12,17,0) 76%),linear-gradient(0deg,rgba(10,12,17,1) 0%,rgba(10,12,17,0) 22%)}
}


/* tour-0924: "Inside the studio" - real screens of the sample book. Desktop: the
   list on the left, one browser window on the right showing the chosen screen.
   Phones: swipeable cards, every screen visible, no script needed. */
#signinCard.lp2 .l2-tour{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);column-gap:44px;margin-top:44px;align-items:start}
#signinCard.lp2 .l2-ti{display:contents}
#signinCard.lp2 .l2-twin{grid-column:2;grid-row:1;display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--rule-2);border-bottom:0;
  border-radius:16px 16px 0 0;background:var(--plate-2)}
#signinCard.lp2 .l2-twin i{width:11px;height:11px;border-radius:50%;background:#3a4155}
#signinCard.lp2 .l2-twin i:first-child{background:var(--mag)}
#signinCard.lp2 .l2-twin span{margin-left:14px;font:500 12px/1 var(--mono);color:var(--faint);padding:6px 12px;border-radius:999px;background:var(--press)}
#signinCard.lp2 .l2-tshot{grid-column:2;grid-row:2 / span 8;margin:0;opacity:0;visibility:hidden;transform:translateY(8px) scale(.99);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
#signinCard.lp2 .l2-tshot img{width:100%;height:auto;border:1px solid var(--rule-2);border-radius:0 0 16px 16px;background:#f3f1ec;
  box-shadow:0 50px 100px -40px rgba(255,46,136,.35),0 30px 60px -30px rgba(0,0,0,.8)}
#signinCard.lp2 .l2-ti.is-active .l2-tshot{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
#signinCard.lp2 .l2-tt{grid-column:1;position:relative;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:16px 18px 16px 20px;border:0;border-left:2px solid var(--rule);
  border-radius:0 12px 12px 0;background:transparent;color:var(--mute);font:inherit;box-shadow:none;overflow:hidden;transition:background .25s,border-color .25s}
#signinCard.lp2 .l2-ti:nth-child(1) .l2-tt{grid-row:1}#signinCard.lp2 .l2-ti:nth-child(2) .l2-tt{grid-row:2}#signinCard.lp2 .l2-ti:nth-child(3) .l2-tt{grid-row:3}
#signinCard.lp2 .l2-ti:nth-child(4) .l2-tt{grid-row:4}#signinCard.lp2 .l2-ti:nth-child(5) .l2-tt{grid-row:5}#signinCard.lp2 .l2-ti:nth-child(6) .l2-tt{grid-row:6}
#signinCard.lp2 .l2-ti:nth-child(7) .l2-tt{grid-row:7}
#signinCard.lp2 .l2-tt b{display:block;font:700 19px/1.25 var(--display);letter-spacing:-.01em;color:var(--mute);transition:color .25s}
#signinCard.lp2 .l2-tt span{display:block;font-size:15px;line-height:1.55;color:var(--mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .35s}
#signinCard.lp2 .l2-tt:hover b{color:var(--ink)}
#signinCard.lp2 .l2-ti.is-active .l2-tt{background:var(--plate);border-left-color:var(--mag)}
#signinCard.lp2 .l2-ti.is-active .l2-tt b{color:var(--ink)}
#signinCard.lp2 .l2-ti.is-active .l2-tt span{max-height:12em;opacity:1;margin-top:6px}
#signinCard.lp2 .l2-tt-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--mag),var(--cyan))}
#signinCard.lp2 .l2-tour.is-auto .l2-ti.is-active .l2-tt-bar{animation:l2tourbar var(--l2-tour-ms,6500ms) linear both}
@keyframes l2tourbar{from{width:0}to{width:100%}}
@media (max-width:1020px){
  #signinCard.lp2 .l2-tour{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:36px -16px 0;padding:4px 16px 18px;scrollbar-width:none}
  #signinCard.lp2 .l2-tour::-webkit-scrollbar{display:none}
  #signinCard.lp2 .l2-ti{display:flex;flex-direction:column;flex:0 0 86%;scroll-snap-align:center;border-radius:18px;background:var(--plate);border:1px solid var(--rule);overflow:hidden}
  #signinCard.lp2 .l2-twin{display:none}
  #signinCard.lp2 .l2-tshot{order:-1;opacity:1;visibility:visible;transform:none;transition:none}
  #signinCard.lp2 .l2-tshot img{border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none}
  #signinCard.lp2 .l2-tt{border:0;border-radius:0;background:transparent;padding:16px 18px 20px;cursor:default;pointer-events:none}
  #signinCard.lp2 .l2-tt b{color:var(--ink)}
  #signinCard.lp2 .l2-tt span{max-height:none;opacity:1;margin-top:6px}
  #signinCard.lp2 .l2-ti.is-active .l2-tt{background:transparent}
  #signinCard.lp2 .l2-tt-bar{display:none}
  #signinCard.lp2 .l2-tour::after{content:"";flex:0 0 2px}
}

/* smaller screens */
@media (max-width:1020px){
  #signinCard.lp2 .l2-links{display:none}
  #signinCard.lp2 .l2-hero{grid-template-columns:1fr;padding-top:36px}
  #signinCard.lp2 .l2-stage{max-width:460px;margin-top:8px}
  #signinCard.lp2 .l2-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  #signinCard.lp2 .l2-two,#signinCard.lp2 .l2-pricegrid{grid-template-columns:1fr}
}
@media (max-width:760px){
  #signinCard.lp2 .l2-steps,#signinCard.lp2 .l2-seals{grid-template-columns:1fr}
  #signinCard.lp2 .l2-covers{grid-template-columns:1fr}
  #signinCard.lp2 .l2-cover3d{max-width:260px}
  #signinCard.lp2 .l2-pin b{font-size:10.5px;padding:5px 7px}
  #signinCard.lp2 .l2-pin::before{width:9px;height:9px}
}
@media (max-width:560px){
  #signinCard.lp2{font-size:16px}
  #signinCard.lp2 .l2-mark .tag{display:none}
  #signinCard.lp2 .l2-form{flex-direction:column;border-radius:20px;padding:8px}
  #signinCard.lp2 .l2-form input{padding:14px 12px}
  #signinCard.lp2 .l2-form .l2-btn{width:100%}
  #signinCard.lp2 .l2-bento{grid-template-columns:1fr}
  #signinCard.lp2 .l2-bento .b-wide{grid-column:auto}
  #signinCard.lp2 .l2-seal{grid-template-columns:1fr;justify-items:start}
  #signinCard.lp2 .rd-row{flex-direction:column;align-items:flex-start;gap:8px}
  #signinCard.lp2 .rd-us{padding:22px 18px}
  #signinCard.lp2 .l2-pin{display:none}
  #signinCard.lp2 .l2-legend{display:block;color:var(--mute);font-size:14px;margin-top:12px}
  #signinCard.lp2 .l2-legend b{color:var(--mag);font-weight:600}
  #signinCard.lp2 .l2-swipe{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:14px 0 -22px}
  #signinCard.lp2 .g-scale{height:auto;display:grid;gap:6px}
  #signinCard.lp2 .g-scale span{position:static;padding:0;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  #signinCard.lp2 *,#signinCard.lp2 *::before,#signinCard.lp2 *::after{animation:none!important;transition:none!important}
}

/* v2-access-0925: a link inside a sentence is underlined - told apart by
   colour alone it was 1.2:1 against the words round it. */
#signinCard.lp2 p a, #signinCard.lp2 .l2-foot span a{text-decoration:underline;text-underline-offset:2px}
#signinCard.lp2 .l2-tablewrap:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}