/* ============ Dejoiy Mail — landing.css : mail.dejoiy.com/home and admin-mail.dejoiy.com ============
   One motif runs everything: the D-shaped box from the :D logo. It is the hero stage, the frame for
   every screenshot, the bullet in the band and the mark in the footer. Sticker world: hot pink and ink,
   thick outlines, hard offset shadows, Bricolage Grotesque. */
:root{--paper:#fbf6f9;--surface:#fff;--ink:#121212;--ink-2:#4a464c;--soft:var(--dj-soft,#ffe1ef);--pink:var(--dj-pop,#ff4fa3);--pink-deep:var(--dj-deep,#c4166c);
  --edge:#121212;--ground:var(--paper);--text:var(--ink);--muted:#4f4a52;
  --font:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);
  --m:clamp(16px,3vw,40px);--max:1320px;
  /* the D: square-ish left corners, a half-round right side (150 x 140 in the logo) */
  --d-radius:12% 46.7% 46.7% 12% / 12.86% 50% 50% 12.86%}
@media (prefers-color-scheme:dark){:root{--paper:#141215;--surface:#1e1b20;--ground:#141215;--text:#f5f2f0;--muted:#c9c3cc;--edge:#f5f2f0;--soft:var(--dj-soft-dark,#3a1d2c)}}
body.lp-admin{--ground:#121212;--surface:#1c1a1e;--text:#f5f2f0;--muted:#c9c3cc;--edge:#f5f2f0;--soft:var(--dj-soft-dark,#3a1d2c)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{font:18px/1.55 var(--font);color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--pink);color:#121212}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-skip{position:absolute;left:12px;top:-64px;z-index:20;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff}
.lp-skip:focus{top:12px}

/* ---------- buttons: pill stickers with a hard shadow ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:2px solid var(--edge);border-radius:999px;
  background:var(--pink);color:#121212;font-weight:800;font-size:16px;text-decoration:none;white-space:nowrap;box-shadow:3px 3px 0 var(--edge);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.lp-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}
.lp-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.lp-btn.ghost{background:var(--surface);color:var(--text)}
.lp-btn.big{min-height:60px;padding:0 30px;font-size:18px;box-shadow:5px 5px 0 var(--edge)}
.lp-btn.big:hover{box-shadow:7px 7px 0 var(--edge)}
.lp-btn.small{min-height:40px;padding:0 18px;font-size:14px}

/* ---------- nav ---------- */
.lp-nav{position:relative;z-index:5;display:flex;align-items:center;gap:24px;width:min(var(--max),100%);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) var(--m) 10px}
.lp-logo img{height:36px;width:auto}
.lp-links{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:16px}
.lp-links a{position:relative;text-decoration:none;padding:6px 0}
.lp-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.lp-links a:hover::after{transform:scaleX(1)}
.lp-actions{display:flex;gap:10px}
.lp-tag{padding:3px 10px;border-radius:999px;background:var(--pink);color:#121212;font-size:13px;font-weight:800}

/* ---------- the D ---------- */
.lp-d{position:relative;aspect-ratio:150/140;border-radius:var(--d-radius);background:var(--pink);overflow:hidden}

/* ---------- hero: copy left, a giant D cropped by the right edge ---------- */
.lp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;min-height:min(88svh,920px);
  width:min(var(--max),100%);margin:0 auto;padding:clamp(24px,5vh,64px) var(--m) clamp(48px,8vh,96px)}
.lp-hero-copy{position:relative;z-index:2}
.lp-hero h1{font-size:clamp(48px,6vw,96px);line-height:.9;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.lp-smile{display:inline-block;padding:0 .12em .04em;border-radius:.16em;background:var(--pink);color:#121212;transform:rotate(-4deg);transform-origin:20% 60%}
.lp-lede{margin-top:26px;max-width:34ch;font-size:clamp(18px,1.4vw,20px);color:var(--muted)}
.lp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.lp-note{margin-top:18px;font-size:14px;color:var(--muted)}
.lp-hero-art{position:relative;align-self:stretch;min-height:520px}
.lp-d-hero{position:absolute;top:50%;left:12%;height:min(118vh,1080px);transform:translateY(-50%)}
.lp-eye{position:absolute;z-index:1;width:clamp(44px,5vw,76px);aspect-ratio:1;border-radius:50%;left:-4%}
.lp-eye-1{top:27%;background:var(--surface);border:4px solid var(--edge)}
.lp-eye-2{top:60%;background:var(--ink)}
body.lp-admin .lp-eye-2{background:var(--pink)}
.lp-eye-1{animation:lpWink 5s ease-in-out 2s infinite}
@keyframes lpWink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
/* a phone stands on the D stage; three looks crossfade like light changing */
.lp-fade{position:absolute;left:13%;top:50%;width:min(34%,320px);aspect-ratio:390/844;transform:translateY(-50%) rotate(-5deg);
  border:3px solid #121212;border-radius:34px;overflow:hidden;background:#fff;box-shadow:12px 12px 0 #121212}
.lp-fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 1.6s ease}
.lp-fade img.is-on{opacity:1}
body.lp-admin .lp-fade{width:min(84%,820px);left:9%;aspect-ratio:1440/900;border-radius:20px;transform:translateY(-50%) rotate(-3deg)}

/* ---------- the band: one ink strip, D bullets, running sideways ---------- */
.lp-band{overflow:hidden;background:var(--ink);color:#fff;border-block:3px solid var(--ink);transform:rotate(-1.2deg);margin:0 -2vw;position:relative;z-index:3}
body.lp-admin .lp-band{background:var(--pink);color:#121212;border-color:var(--pink)}
.lp-band-track{display:flex;width:max-content;animation:lpMarquee 38s linear infinite}
.lp-band span{display:flex;align-items:center;gap:22px;padding:18px 22px 18px 0;font-size:clamp(20px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.lp-band span::before{content:"";width:.9em;aspect-ratio:150/140;border-radius:var(--d-radius);background:var(--pink);flex:none}
body.lp-admin .lp-band span::before{background:#121212}
@keyframes lpMarquee{to{transform:translateX(-50%)}}

/* ---------- sentences with switches ---------- */
.lp-switches{margin-top:clamp(64px,10vh,120px)}
.lp-switch{display:flex;align-items:center;gap:24px;min-height:20vh;padding:clamp(22px,3vh,36px) max(var(--m),calc((100% - var(--max))/2 + var(--m)));transition:background .45s var(--ease),color .45s var(--ease)}
.lp-switch>div{flex:1;min-width:0}
.lp-statement{font-size:clamp(26px,3.2vw,46px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:var(--muted);transition:color .3s}
.lp-more{max-height:0;overflow:hidden;opacity:0;margin-top:0;max-width:60ch;font-size:18px;font-weight:500;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.lp-switch.is-on .lp-statement{color:inherit}
.lp-switch.is-on .lp-more{max-height:6em;opacity:1;margin-top:10px}
.lp-switch.is-on[data-tone="pink"]{background:var(--pink);color:#121212}
.lp-switch.is-on[data-tone="ink"]{background:#121212;color:#fff}
.lp-switch.is-on[data-tone="soft"]{background:var(--soft);color:var(--text)}
body.lp-admin .lp-switch.is-on[data-tone="ink"]{background:#f5f2f0;color:#121212}
.lp-toggle{flex:none;position:relative;width:76px;height:44px;border:3px solid currentColor;border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background .3s}
.lp-toggle i{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:currentColor;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lp-toggle[aria-checked="true"] i{transform:translateX(32px)}
.lp-switch:not(.is-on) .lp-toggle{color:var(--muted)}

/* ---------- showcase: names on the left, a D stage on the right ---------- */
.lp-show{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--m);align-items:end;width:min(var(--max),100%);margin:0 auto;padding:clamp(96px,16vh,200px) var(--m) clamp(40px,8vh,80px)}
.lp-show h2,.lp-how h2{font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:800}
.lp-show-names{display:flex;flex-direction:column;align-items:flex-start;margin-top:14px}
.lp-show-names button{border:0;background:none;color:var(--muted);font:inherit;font-size:clamp(28px,2.9vw,44px);line-height:1.18;font-weight:600;letter-spacing:-.03em;cursor:pointer;padding:2px 0;
  transition:color .25s,transform .3s var(--ease)}
.lp-show-names button:hover{color:var(--text);transform:translateX(6px)}
.lp-show-names button[aria-selected="true"]{color:var(--text);font-weight:800}
.lp-show-names button[aria-selected="true"]::after{content:" ←";color:var(--pink)}
.lp-show-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.lp-d-show{width:min(100%,64vh * 150/140,620px);overflow:visible;transition:background .5s var(--ease)}
.lp-d-show img{position:absolute;left:50%;bottom:6%;width:44%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border:3px solid #121212;border-radius:28px;
  background:#fff;box-shadow:10px 10px 0 #121212;opacity:0;transform:translate(-50%,24px) rotate(3deg);transition:opacity .3s,transform .5s var(--ease)}
.lp-d-show img.wide{width:88%;aspect-ratio:1440/900;border-radius:16px;bottom:22%}
.lp-d-show img.is-on{opacity:1;transform:translate(-50%,0) rotate(3deg)}
.lp-d-show img:not(.wide){bottom:-2%;height:auto}
.lp-show-fact{margin-top:22px;min-height:3em;max-width:36ch;text-align:center;font-size:16px;color:var(--muted)}

/* ---------- how it works: tiles that grow ---------- */
.lp-how{width:min(var(--max),100%);margin:0 auto;padding:clamp(96px,16vh,200px) var(--m) clamp(40px,8vh,80px);position:relative}
.lp-how h2{position:absolute;top:clamp(96px,16vh,200px);left:var(--m);max-width:7em}
.lp-tiles{display:grid;grid-template-columns:3fr 4fr 5fr;gap:12px;align-items:end;padding-top:3em}
.lp-tile{display:flex;flex-direction:column}
.lp-tile-pic{position:relative;overflow:hidden;border:2px solid var(--edge);border-radius:28px;display:flex;align-items:flex-end;justify-content:center}
.t1 .lp-tile-pic{height:min(34vh,330px);background:var(--soft)}
.t2 .lp-tile-pic{height:min(48vh,470px);background:var(--pink)}
.t3 .lp-tile-pic{height:min(64vh,620px);background:#121212}
.lp-tile-pic img{width:68%;height:auto;margin-top:auto;border:3px solid #121212;border-bottom:0;border-radius:22px 22px 0 0;transform:translateY(8%);transition:transform .6s var(--ease)}
.t3 .lp-tile-pic img{width:90%;border-color:#fff;border-radius:16px 16px 0 0}
.lp-tile:hover .lp-tile-pic img{transform:translateY(2%)}
.lp-tile figcaption{margin-top:14px;font-size:16px;color:var(--muted);max-width:34ch}
.lp-tile figcaption b{display:block;color:var(--text);font-size:22px;letter-spacing:-.02em;font-weight:800;margin-bottom:2px}

/* ---------- claim: the sentence has a blank in it ---------- */
.lp-claim{width:min(var(--max),100%);margin:0 auto;padding:clamp(96px,16vh,200px) var(--m) clamp(96px,14vh,160px)}
.lp-claim-line{display:flex;flex-wrap:wrap;align-items:center;gap:.18em;font-size:clamp(40px,6vw,96px);line-height:1.1;letter-spacing:-.045em;font-weight:800}
.lp-blank{display:inline-flex}
.lp-blank input{width:4.2em;height:1.15em;padding:0 .22em;border:3px solid var(--edge);border-radius:.22em;background:var(--soft);color:var(--text);font:inherit;letter-spacing:-.03em;
  caret-color:var(--pink);transition:box-shadow .2s var(--ease)}
.lp-blank.wide input{width:7.4em}
.lp-blank input::placeholder{color:color-mix(in srgb,var(--text) 45%,transparent)}
.lp-blank input:focus{outline:none;box-shadow:.08em .08em 0 var(--pink)}
.lp-at{color:var(--pink)}
.lp-go{height:1.15em;padding:0 .4em;border:3px solid var(--edge);border-radius:999px;background:var(--pink);color:#121212;font:inherit;cursor:pointer;box-shadow:.07em .07em 0 var(--edge);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.lp-go:hover{transform:translate(-.02em,-.02em);box-shadow:.1em .1em 0 var(--edge)}
.lp-go:active{transform:translate(.03em,.03em);box-shadow:0 0 0 var(--edge)}
.lp-claim-note{margin-top:22px;font-size:16px;color:var(--muted)}

/* ---------- admin: try the console ---------- */
.lp-try{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,2.4vw,28px);width:min(var(--max),100%);margin:0 auto;padding:clamp(96px,16vh,200px) var(--m) 40px}
.lp-try h2{grid-column:1/-1;font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:800}
.lp-try>p{grid-column:1/-1;margin-top:-6px;color:var(--muted);font-size:16px}
.lp-panel{background:#fff;color:#121212;border:3px solid var(--pink);border-radius:26px;padding:clamp(18px,2.4vw,28px);box-shadow:10px 10px 0 var(--pink)}
.lp-panel h3{font-size:22px;letter-spacing:-.02em;font-weight:800}
.lp-panel .lp-sub{font-size:14px;color:#4a464c;margin:4px 0 16px}
.lp-add{display:flex;gap:10px;flex-wrap:wrap}
.lp-add input{flex:1 1 180px;min-width:0;height:50px;padding:0 14px;border:2px solid #121212;border-radius:14px;font:inherit;font-size:16px;color:#121212;background:#fff}
.lp-add input:focus{outline:none;box-shadow:4px 4px 0 var(--pink)}
.lp-add .lp-btn{--edge:#121212;color:#121212}
.lp-people{list-style:none;margin-top:16px;display:grid;gap:8px}
.lp-people li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:#f6f1f4;animation:lpPop .45s var(--ease) both}
.lp-people .av{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:800;color:#121212;background:var(--pink)}
.lp-people .who{min-width:0}
.lp-people .who b{display:block;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-people .who span{display:block;font-size:14px;color:#4a464c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-pill{font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px;background:#d8f5e5;color:#0d6b3c}
.lp-pill.wait{background:#ffe9b8;color:#7a4b00}
.lp-dns{list-style:none;display:grid;gap:10px;margin:6px 0 18px}
.lp-dns li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#f6f1f4}
.lp-dns li b{width:64px;font-size:16px;font-weight:800}
.lp-dns li span{flex:1;min-width:0;font-size:14px;color:#4a464c}
.lp-score{font-size:15px;font-weight:700;margin-bottom:12px}
@keyframes lpPop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ---------- footer: the mark, built large ---------- */
.lp-foot{background:var(--soft);padding:clamp(56px,10vh,110px) var(--m) calc(26px + env(safe-area-inset-bottom))}
body.lp-admin .lp-foot{background:#1c1a1e}
.lp-mark{overflow:visible;display:block;width:min(var(--max) - 2 * var(--m),100%);height:auto;max-height:34svh;margin:0 auto}
.lp-foot-grid,.lp-foot-last{width:min(var(--max) - 2 * var(--m),100%);margin:0 auto}
.lp-foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:56px;font-size:16px}
.lp-foot-grid nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:700}
.lp-foot-grid nav a{text-decoration:none}
.lp-foot-grid nav a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:5px}
.lp-foot-grid p{color:var(--muted)}
.lp-foot-last{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;font-size:14px;color:var(--muted)}
body.lp-admin .lp-mark circle:first-child{stroke:#f5f2f0}

/* ---------- entrances (only when JS runs, so nothing hides without it) ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .lp-mark .rv{transform:translateY(40px);transform-box:fill-box}

/* ---------- tablets ---------- */
@media (max-width:1100px){
  .lp-links{display:none}
  .lp-actions{margin-left:auto}
  .lp-hero{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .lp-hero-art{min-height:clamp(420px,70vw,640px);margin:24px calc(-1 * var(--m)) 0}
  .lp-d-hero{left:auto;right:-18%;height:100%;top:0;transform:none}
  .lp-eye{left:auto;right:calc(100% - 22%)}
  .lp-fade{left:auto;right:40%;top:50%;width:min(42%,300px)}
  body.lp-admin .lp-fade{right:12%;width:min(78%,700px)}
  .lp-show{grid-template-columns:1fr;gap:28px}
  .lp-show-names{flex-direction:row;flex-wrap:wrap;gap:4px 22px;width:100%}
  .lp-show-names::-webkit-scrollbar{display:none}
  .lp-show-names button{flex:none;font-size:clamp(22px,4vw,28px)}
  .lp-show-names button[aria-selected="true"]::after{content:""}
  .lp-show-names button[aria-selected="true"]{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:4px;text-underline-offset:6px}
  .lp-d-show{width:min(86vw,560px)}
  .lp-try{grid-template-columns:1fr}
}
/* ---------- phones ---------- */
@media (max-width:680px){
  body{font-size:17px}
  .lp-logo img{height:28px}
  .lp-actions .lp-btn{min-height:40px;padding:0 15px;font-size:15px}
  .lp-hero h1{font-size:clamp(44px,13vw,64px)}
  .lp-cta .lp-btn.big{flex:1 1 100%}
  .lp-hero-art{min-height:118vw}
  .lp-d-hero{right:-40%}
  .lp-eye{left:3%;right:auto;width:42px}
  .lp-fade{right:26%;width:52%;border-radius:26px;box-shadow:8px 8px 0 #121212}
  body.lp-admin .lp-fade{right:6%;width:88%;border-radius:14px}
  .lp-switch{min-height:132px;gap:16px}
  .lp-statement{font-size:clamp(22px,6.4vw,28px)}
  .lp-more{font-size:15px}
  .lp-toggle{width:64px;height:40px}.lp-toggle i{width:26px;height:26px}.lp-toggle[aria-checked="true"] i{transform:translateX(24px)}
  .lp-how h2{position:static;margin-bottom:24px;max-width:none}
  .lp-tiles{grid-template-columns:1fr;gap:28px;padding-top:0}
  .t1 .lp-tile-pic{height:auto;aspect-ratio:1/.9}.t2 .lp-tile-pic{height:auto;aspect-ratio:1/1.1}.t3 .lp-tile-pic{height:auto;aspect-ratio:1/1}
  .lp-claim-line{font-size:clamp(34px,10vw,48px)}
  .lp-blank.wide{flex:1 1 0;min-width:0}.lp-blank.wide input{width:100%}
  .lp-at{margin-right:20vw}
  .lp-blank input{width:4.6em}
  .lp-foot-last{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
#lp-add{margin-top:10px}
.lp-page{overflow:hidden}
.lp-tile-pic img.fill{width:100%;height:100%;object-fit:cover;object-position:left top;border:0;border-radius:0;transform:none}
body.lp-admin .t3 .lp-tile-pic img.fill{object-position:right top}
@media (max-width:680px){body.lp-admin .lp-actions .ghost,body.lp-admin .lp-tag{display:none}.lp-nav{gap:12px}}

/* ---------- pricing: flat per company, the popular plan is the pink sticker ---------- */
.lp-pricing{width:min(var(--max),100%);margin:0 auto;padding:clamp(96px,16vh,200px) var(--m) 20px}
.lp-price-head h2{font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:800}
.lp-price-head p{margin-top:12px;color:var(--muted);font-size:18px;max-width:52ch}
.lp-bill{display:inline-flex;gap:4px;margin-top:22px;padding:5px;border:2px solid var(--edge);border-radius:999px;background:var(--surface)}
.lp-bill button{border:0;border-radius:999px;padding:10px 18px;background:none;color:var(--text);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .25s,color .25s}
.lp-bill button[aria-checked="true"]{background:var(--ink);color:#fff}
.lp-calc{margin-top:34px;max-width:720px;padding:20px 22px;border-radius:22px;background:var(--soft)}
.lp-calc label{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.lp-calc output{display:inline-block;min-width:1.6em;padding:0 .25em;border-radius:.3em;background:var(--pink);color:#121212;text-align:center}
.lp-calc input{width:100%;margin:16px 0 10px;accent-color:var(--pink-deep);height:28px;cursor:pointer}
.lp-calc p{font-size:16px;color:var(--text);max-width:62ch}
.lp-calc p b{font-weight:800}
.lp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:40px;align-items:start}
.lp-plan{display:flex;flex-direction:column;gap:10px;padding:26px 52px 26px 26px;border:2px solid var(--edge);border-radius:24px 90px 90px 24px;background:var(--surface);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-plan:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--edge)}
.lp-plan.is-pop{background:var(--pink);color:#121212;border-color:#121212;transform:rotate(-1.2deg);box-shadow:8px 8px 0 #121212}
.lp-plan.is-pop:hover{transform:rotate(-1.2deg) translateY(-4px)}
.lp-plan.is-pick{outline:4px solid var(--pink);outline-offset:4px}
.lp-plan.is-pop.is-pick{outline-color:var(--edge)}
.lp-plan h3{font-size:22px;letter-spacing:-.02em;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-flag{font-size:16px;font-weight:600}
.lp-price-line b{font-size:clamp(44px,4.4vw,63px);line-height:1;letter-spacing:-.04em;font-weight:800}
.lp-price-line span[data-per]{font-size:18px;font-weight:600;margin-left:4px}
.lp-per-head{font-size:16px;font-weight:600;color:var(--muted)}
.lp-plan.is-pop .lp-per-head{color:#121212}
.lp-plan ul{list-style:none;display:grid;gap:8px;margin:8px 0 14px;font-size:16px}
.lp-plan li{display:flex;gap:10px;align-items:baseline}
.lp-plan li::before{content:"";flex:none;width:.8em;aspect-ratio:150/140;border-radius:var(--d-radius);background:var(--pink);transform:translateY(.1em)}
.lp-plan.is-pop li::before{background:#121212}
.lp-plan .lp-btn{margin-top:auto;align-self:flex-start}
.lp-plan.is-pop .lp-btn{background:#121212;color:#fff;border-color:#121212;box-shadow:3px 3px 0 #fff}
.lp-fine{margin-top:26px;font-size:14px;color:var(--muted);max-width:68ch}
@media (max-width:1100px){.lp-plans{grid-template-columns:1fr;max-width:560px}}

/* ---------- colour picker: preview on click, keep it with Save ---------- */
.lp-colours{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:26px;padding:12px 14px;border:2px solid var(--edge);border-radius:999px;background:var(--surface);width:max-content;max-width:100%}
.lp-colours>span:first-child{font-weight:800;font-size:16px;padding-left:6px}
.lp-swatches{display:flex;gap:8px;flex-wrap:wrap}
.lp-swatches button{width:30px;height:30px;border-radius:50%;border:2px solid var(--edge);background:var(--c);cursor:pointer;transition:transform .2s var(--ease)}
.lp-swatches button:hover{transform:scale(1.15)}
.lp-swatches button[aria-checked="true"]{transform:scale(1.15);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--edge)}
.lp-saved{font-size:14px;font-weight:600;color:var(--muted)}
.lp-saved:empty{display:none}
@media (max-width:680px){.lp-colours{border-radius:22px;width:100%}.lp-swatches button{width:34px;height:34px}}