/*! isPluto Space theme · © SMHosting Co., Ltd. */
/* isPluto Space 1.4.0 (Pluto 0.25): the mascot clips in place of the 3D mascot (W1), the
   home top (W2), the spacing of every section (W3), four plans a row (W4), the features page (W5), the tops of the
   payment / contact / terms pages (W6) and the maintenance page (W7). Tokens from theme.css. Everything that moves
   stops for prefers-reduced-motion and Kumo's pause (design.css). Breakpoints as the rest of the theme: 1100, 860, 560. */
.cms-theme-ispluto-space {

/* ---------- W3: the space between sections — one set of values for every page (about 40% less than 1.3) ---------- */
& {
	--ip-sp-sec-t: 44px;   /* 72 → 44: a section's top */
	--ip-sp-sec-b: 40px;   /* 64 → 40: a section's bottom */
	--ip-sp-hero-t: 24px;  /* 32 → 24: under the menu, inner pages */
	--ip-sp-hero-b: 44px;  /* 72 → 44 */
	--ip-sp-home-t: 16px;  /* the home top: 16 under the menu */
	--ip-sp-home-b: 84px;
	--ip-sp-end: 44px;     /* 72 → 44: below the last box of a page part (contact, terms, CTA) */
	--ip-sp-short: 28px;   /* 40 → 28 */
	--ip-nav-h: 96px;      /* the menu sits over the top of the first section */
}
& .ip-section { padding: var(--ip-sp-sec-t) 0 var(--ip-sp-sec-b); }
& .ip-hero { padding: calc(var(--ip-nav-h) + var(--ip-sp-hero-t)) 0 var(--ip-sp-hero-b); }
& .ip-hero--home { padding: calc(var(--ip-nav-h) + var(--ip-sp-home-t)) 0 var(--ip-sp-home-b); min-height: clamp(560px, 52vw, 760px); }
& .ip-cta { margin: 16px 0 var(--ip-sp-end); }
& .ip-cta__copy { padding-bottom: 0; }
& .ip-contact, & .ip-terms { padding-bottom: var(--ip-sp-end); }
& .ip-short { padding-top: var(--ip-sp-short); }
& .ip-contact--short .ip-short { padding-top: 32px; }
& .ip-foot, & #footer.ip-foot { padding: clamp(36px, 4vw, 56px) 0 20px; }
& .ip-foot__grid { gap: clamp(20px, 2.6vw, 32px); }
& .ip-foot__word { margin-top: 28px; }
& .ipf-hero { padding-bottom: 36px; }
& .ipf-jumps { margin-top: 28px; }
& .ipf-svc { padding: 14px 0; }
& #f-bio { padding-top: 44px; }
& .ip-mt__in { padding-bottom: 28px; }

/* ---------- W1: a mascot clip — the still picture, then the WebM (or the animated WebP) over it ---------- */
& .ipv { position: relative; display: block; margin: 0; width: 100%; }
& .ipv__media { position: absolute; z-index: 1; display: block; pointer-events: none; }
& .ipv__still, & .ipv__vid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
& .ipv__vid { opacity: 0; transition: opacity .35s var(--ease-out); }
& .ipv__media[data-state="webm"] .ipv__vid { opacity: 1; }
& .ipv__media[data-state="webm"] .ipv__still { visibility: hidden; }
& .ipv-halo { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; filter: blur(12px); pointer-events: none; }
& .ipv-pad { position: absolute; z-index: 0; left: 50%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(184,255,92,.34), rgba(184,255,92,0) 70%); box-shadow: 0 0 0 2px rgba(184,255,92,.55), 0 0 40px rgba(184,255,92,.42); animation: ipvPad 3s ease-in-out infinite; pointer-events: none; }
& .ipv-shadow { position: absolute; z-index: 0; left: 50%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(2,3,12,.85), transparent 70%); pointer-events: none; }
& .ipv-orbit { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
& .ipv-orbit__dot { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
& .ipv-orbit__dot--y { background: var(--cta); box-shadow: 0 0 14px var(--cta); }
& .ipv-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--fg); animation: ipvFloat 6s ease-in-out infinite; pointer-events: none; }
& .ipv-chip--icon { padding: 10px; border-radius: 16px; }
& .ipv-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; font-style: normal; }
& .ipv-ic--bare { display: grid; place-items: center; font-style: normal; }
& .ipv-ic--p { background: rgba(140,151,255,.15); color: #8c97ff; }
& .ipv-ic--l { background: rgba(184,255,92,.15); color: #b8ff5c; }
& .ipv-ic--y { background: rgba(255,216,77,.15); color: #ffd84d; }
& .ipv-ic--o { background: rgba(253,186,116,.15); color: #fdba74; }
& .ipv-ic--s { background: rgba(56,189,248,.18); color: #7dd3fc; }
& .ipv-ic--g { background: rgba(6,199,85,.18); color: #4ade80; }
& .ipv-ic--bare.ipv-ic--p, & .ipv-ic--bare.ipv-ic--l, & .ipv-ic--bare.ipv-ic--y { background: none; }
& .ipv-ic--bare.ipv-ic--p { color: #c7cdff; }
& .ipv-spark { position: absolute; z-index: 2; width: 6px; height: 6px; border-radius: 50%; animation: ipvTw 3s ease-in-out infinite; pointer-events: none; }
& .ipv-wave { position: absolute; z-index: 2; left: 2%; top: 14%; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(184,255,92,.7); animation: ipvWave 2.4s ease-out infinite; pointer-events: none; }
& .ipv-wave--late { animation-delay: 1.2s; }

/* home: on its pad on the right, two orbits, the four services turning (their words stay upright) */
& .ipv--home { aspect-ratio: 1 / 1.08; }
& .ipv--home .ipv-orbit--a { left: 7%; top: 4%; width: 86%; box-shadow: inset 0 0 0 1.5px rgba(199,205,255,.18); animation: ipvSpin 46s linear infinite; }
& .ipv--home .ipv-orbit--b { left: -2%; top: -4%; width: 104%; box-shadow: inset 0 0 0 1px rgba(199,205,255,.08); animation: ipvSpin 70s linear infinite reverse; }
& .ipv-chip--orb { translate: -50% -50%; gap: 10px; animation: ipvSpin 46s linear infinite reverse; }
& .ipv-chip--orb .ipv-ic { width: 32px; height: 32px; border-radius: 11px; }
& .ipv-chip--0 { left: 85.4%; top: 14.6%; } & .ipv-chip--1 { left: 85.4%; top: 85.4%; } & .ipv-chip--2 { left: 14.6%; top: 85.4%; } & .ipv-chip--3 { left: 14.6%; top: 14.6%; }
& .ipv--home .ipv-halo { left: 50%; top: 42%; width: 60%; background: radial-gradient(circle, rgba(140,151,255,.32), rgba(140,151,255,0) 65%); filter: blur(10px); }
& .ipv--home .ipv-pad { bottom: 3%; width: 54%; height: 9%; background: radial-gradient(ellipse, rgba(184,255,92,.35), rgba(184,255,92,0) 70%); box-shadow: 0 0 0 2px rgba(184,255,92,.55), 0 0 40px rgba(184,255,92,.45); }
& .ipv--home .ipv-shadow { bottom: 4.5%; width: 40%; height: 5%; background: radial-gradient(ellipse, rgba(10,4,2,.85), transparent 70%); }
& .ipv--home .ipv__media { left: 50%; bottom: 7%; width: 64%; aspect-ratio: 476 / 612; translate: -50% 0; }
& .ip-hero--home .ip-hero__copy { position: relative; z-index: 3; }
& .ip-hero--home .ip-hero__mascot { position: absolute; z-index: 2; right: 3%; bottom: calc(120px - var(--ip-sp-home-b)); width: clamp(300px, 38vw, 560px); }

/* the sign-up card: the waving clip on the left, a soft shadow under its feet */
& .ip-cta { grid-template-columns: auto minmax(0, 1fr); gap: 32px; padding: clamp(28px, 5vw, 64px); }
& .ipv--cta { aspect-ratio: 5 / 6; }
& .ipv--cta .ipv-shadow { left: 12%; width: 76%; bottom: 4%; height: 40px; translate: none; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }
& .ipv--cta .ipv__media { inset: 0; }
& .ip-cta__mascot { align-self: center; width: clamp(240px, 26vw, 340px); max-width: 100%; margin: -40px auto; }

/* features: floating over Pluto, a pink-violet glow, a shadow on the planet that breathes with the float */
& .ipf-floater { top: 4%; width: 84%; margin-left: -42%; }
& .ipv--features { aspect-ratio: 520 / 536; }
& .ipv--features .ipv__media { inset: 0; }
& .ipf-glow { position: absolute; z-index: 1; left: 50%; top: 36%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(140,151,255,.30), rgba(244,114,182,.10) 45%, rgba(140,151,255,0) 68%); filter: blur(12px); pointer-events: none; }
& .ipf-fshadow { position: absolute; z-index: 1; left: 50%; top: 78%; width: 36%; height: 5%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(5,8,24,.55), transparent 70%); animation: ipvBreath 7s ease-in-out infinite; pointer-events: none; }
& .ipf-twinkle { position: absolute; z-index: 1; border-radius: 50%; background: var(--tw); box-shadow: 0 0 10px var(--tw); animation: ipvTw 3s ease-in-out infinite; pointer-events: none; }
& .ipf-taphint { position: absolute; z-index: 3; right: 0; bottom: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-size: 13px; color: #d8ffb0; pointer-events: none; }
& .ipf-taphint__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }

/* inner pages: the side of the top holds the clip */
& .ip-hero--page .ip-hero__side { min-height: 0; }
/* payment: one orbit, a cyan glow, three labels (the first to the left of the mascot, never over it) */
& .ipv--payment { width: 460px; max-width: 100%; aspect-ratio: 460 / 520; }
& .ipv--payment .ipv-orbit--pay { left: 4%; top: 2%; width: 92%; box-shadow: inset 0 0 0 1.5px rgba(184,255,92,.22); animation: ipvSpin 50s linear infinite; }
& .ipv--payment .ipv-halo { left: 50%; top: 44%; width: 70%; background: radial-gradient(circle, rgba(56,189,248,.26), rgba(140,151,255,.12) 45%, transparent 68%); }
& .ipv--payment .ipv-pad { bottom: 2%; width: 62%; height: 10%; background: radial-gradient(ellipse, rgba(184,255,92,.32), rgba(184,255,92,0) 70%); box-shadow: 0 0 0 2px rgba(184,255,92,.5), 0 0 36px rgba(184,255,92,.4); }
& .ipv--payment .ipv-shadow { bottom: 4%; width: 42%; height: 5%; }
& .ipv--payment .ipv__media { left: 50%; bottom: 5%; height: 92%; aspect-ratio: 372 / 620; translate: -50% 0; }
& .ipv-chip--pay1 { right: calc(81% + 10px); top: 22%; }
& .ipv-chip--pay2 { right: -6%; top: 44%; animation-delay: -2s; }
& .ipv-chip--pay3 { left: -2%; top: 64%; animation-delay: -4s; }
/* services: the clip on the left, the spa's phone on the right, a beam from the mascot's hand to the phone */
& .ip-hero--services .ip-hero__side { height: 640px; }
& .ipv--services { position: absolute; left: -48px; bottom: 0; width: clamp(260px, 30vw, 420px); aspect-ratio: 440 / 610; }
& .ipv--services .ipv-halo { left: 50%; top: 40%; width: 110%; background: radial-gradient(circle, rgba(140,151,255,.30), rgba(184,255,92,.08) 45%, transparent 68%); }
& .ipv--services .ipv-pad { bottom: 0; width: 78%; height: 9%; }
& .ipv--services .ipv-shadow { bottom: 2%; width: 52%; height: 5%; }
& .ipv--services .ipv__media { left: 0; bottom: 4%; width: 100%; aspect-ratio: 440 / 576; }
& .ipv-spark--y { left: 4%; top: 20%; background: #ffd84d; box-shadow: 0 0 10px #ffd84d; }
& .ipv-spark--l { left: 92%; top: 14%; background: #b8ff5c; box-shadow: 0 0 10px #b8ff5c; animation-delay: .8s; }
& .ipv-spark--p { left: 12%; top: 58%; background: #8c97ff; box-shadow: 0 0 10px #8c97ff; animation-delay: 1.6s; }
& .ip-hero--services .ip-phone--holo { left: auto; right: 0; top: 20px; transform: none; animation: ipvHolo 7s ease-in-out infinite; }
& .ip-beam { position: absolute; z-index: 1; left: min(292px, 46%); top: 220px; width: 198px; height: 120px; background: linear-gradient(20deg, rgba(184,255,92,.38), transparent 75%); clip-path: polygon(0 100%, 100% 0, 100% 100%); animation: ipvBeam 2.6s ease-in-out infinite; pointer-events: none; }
/* contact: signal rings at the phone, LINE and email on the left (from config/pluto_legal.php) */
& .ipv--contact { width: 400px; max-width: 100%; aspect-ratio: 420 / 620; }
& .ipv--contact .ipv-halo, & .ipv--terms .ipv-halo { left: 50%; top: 42%; width: 100%; background: radial-gradient(circle, rgba(140,151,255,.30), rgba(184,255,92,.07) 45%, transparent 68%); }
& .ipv--contact .ipv-pad, & .ipv--terms .ipv-pad { bottom: 0; width: 74%; height: 9%; }
& .ipv--contact .ipv-shadow, & .ipv--terms .ipv-shadow { bottom: 2%; width: 50%; height: 5%; }
& .ipv--contact .ipv__media { left: 0; bottom: 4%; width: 100%; aspect-ratio: 420 / 586; }
& .ipv-chip--line { right: calc(84% + 6px); top: 34%; }
& .ipv-chip--mail { right: calc(84% + 6px); top: 60%; animation-delay: -3s; }
/* terms: three glass icons, no words (they stay clear of the paragraph on the left) */
& .ipv--terms { width: 320px; max-width: 100%; aspect-ratio: 384 / 650; }
& .ipv--terms .ipv__media { left: 0; bottom: 4%; width: 100%; aspect-ratio: 384 / 602; }
& .ipv-chip--t1 { left: -4%; top: 16%; }
& .ipv-chip--t2 { right: -4%; top: 30%; animation-delay: -2s; }
& .ipv-chip--t3 { left: -2%; top: 58%; animation-delay: -4s; }
/* the mascot block on its own */
& .ipv-solo .ipv { margin: 0 auto; }
& .ipv-solo--s .ipv { max-width: 220px; } & .ipv-solo--m .ipv { max-width: 320px; } & .ipv-solo--l .ipv { max-width: 460px; }
& .ipv-solo .ipv--home, & .ipv-solo .ipv--cta, & .ipv-solo .ipv--features, & .ipv-solo .ipv--maintenance { aspect-ratio: 1 / 1.08; }
& .ipv-solo .ipv--maintenance .ipv__media { left: 50%; bottom: 9%; width: 64%; aspect-ratio: 464 / 566; translate: -50% 0; }

/* ---------- W7: the maintenance page — the clip with the wrench on its pad, sparks, today's work ---------- */
& .ip-mt__vis .ip-mt__mascot { position: absolute; inset: 0; left: 0; top: 0; width: auto; translate: none; }
& .ipv--maintenance .ipv-halo { left: 50%; top: 46%; width: 62%; background: radial-gradient(circle, rgba(140,151,255,.3), rgba(140,151,255,0) 65%); filter: blur(10px); }
& .ipv--maintenance .ipv-pad { bottom: 6%; width: min(56%, 320px); height: 56px; background: radial-gradient(ellipse, rgba(184,255,92,.32), rgba(184,255,92,0) 70%); box-shadow: 0 0 0 2px rgba(184,255,92,.55), 0 0 40px rgba(184,255,92,.4); }
& .ipv--maintenance .ipv-shadow { bottom: 7.5%; width: min(40%, 230px); height: 30px; }
& .ip-mt__mascot .ipv__media { left: 50%; bottom: 9%; width: min(64%, 360px); aspect-ratio: 464 / 566; translate: -50% 0; }
& .ipv-spark--w1, & .ipv-spark--w2, & .ipv-spark--w3 { background: var(--cta); box-shadow: 0 0 10px var(--cta), 0 0 20px rgba(255,216,77,.6); animation: ipvSpark 1.6s ease-in-out infinite; }
& .ipv-spark--w1 { left: 33%; top: 52%; }
& .ipv-spark--w2 { left: 29%; top: 47%; width: 4px; height: 4px; animation-delay: .5s; }
& .ipv-spark--w3 { left: 36%; top: 45%; width: 5px; height: 5px; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation-delay: 1s; }
& .ip-mt__task { position: absolute; z-index: 3; left: 0; top: 8%; display: flex; flex-direction: column; gap: 8px; min-width: 200px; padding: 14px 16px; border-radius: 20px; font-size: 13px; }
& .ip-mt__task b { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
& .ip-mt__task span { display: flex; align-items: center; gap: 8px; }
& .ip-mt__tick { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #123a2a; color: #86efac; font-style: normal; font-size: 11px; }
& .ip-mt__task-now { color: var(--cta); }
& .ip-mt__tick--now { background: #3a2e10; animation: ipMtPulse 2s infinite; }
& .ip-mt__tick--now i { width: 6px; height: 6px; border-radius: 50%; background: var(--cta); }
& .ip-mt__task-bar { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
& .ip-mt__task-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(184,255,92,.5), transparent); animation: ipvScan 1.8s linear infinite; }
& .ip-mt__cheer { bottom: 16%; }

/* ---------- W4: plans — four a row, all as tall as the longest, the buttons on one line ---------- */
& .ip-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 0; padding: 14px 0 0; list-style: none; }
& .ip-plans__grid > .ip-plan { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; gap: 16px; }
& .ip-plans__grid .ip-plan__for { margin: 0; }
& .ip-plans__grid .ip-plan__cost { min-height: 104px; }
& .ip-plans__grid .ip-plan.is-pop .ip-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ---------- W5: the features page ---------- */
/* each service's words start at the top of its panel */
& .ipf-panel { align-items: start; }
/* the booklet: every leaf turns about one spine (translateZ before rotateY), the float on its own wrapper */
& #f-book .ipf-panel { overflow: clip; overflow-clip-margin: 80px; }
& .ipf-book-float { width: 100%; animation: ipvBookFloat 9s ease-in-out infinite; }
& .ipf-book-wrap { width: min(100%, 520px); padding: 24px 0; perspective: 2400px; perspective-origin: 50% 30%; }
& .ipf-book { transform: rotateX(10deg); animation: none; }
& .ipf-leaf { transition: transform 1s cubic-bezier(.45, .05, .3, 1), z-index 0s linear .5s; }
& .ipf-leaf[data-leaf="0"] { transform: translateZ(4.5px) rotateY(0deg); }
& .ipf-leaf[data-leaf="1"] { transform: translateZ(3px) rotateY(0deg); }
& .ipf-leaf[data-leaf="2"] { transform: translateZ(1.5px) rotateY(0deg); }
& .ipf-leaf[data-leaf="0"].is-turned { transform: translateZ(1.5px) rotateY(-179.9deg); }
& .ipf-leaf[data-leaf="1"].is-turned { transform: translateZ(3px) rotateY(-179.9deg); }
& .ipf-leaf[data-leaf="2"].is-turned { transform: translateZ(4.5px) rotateY(-179.9deg); }
/* the shop in an account: a sample only */
& .ipx-demo { margin-left: auto; font-size: 12px; font-weight: 400; color: #959dc6; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
	& .ip-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 960px) {
	& .ip-mt__task { display: none; }
}
@media (max-width: 860px) {
	& { --ip-nav-h: 150px; }
	& .ip-hero--home .ip-hero__mascot { position: relative; right: auto; bottom: auto; width: 100%; max-width: 560px; margin: -40px auto 0; }
	& .ip-cta { grid-template-columns: minmax(0, 1fr); }
	& .ip-cta__mascot { width: min(240px, 70%); margin: -20px auto 0; }
	& .ipf-panel.is-rev > .ipf-demo { order: 0; }
	& .ip-hero--services .ip-hero__side { height: auto; }
	& .ipv--services { position: relative; left: auto; margin: 0 auto; width: min(300px, 76%); }
	& .ip-beam { display: none; }
	& .ipv--payment { width: min(460px, 86%); margin: 0 auto; }
	& .ipv--contact { width: min(340px, 76%); margin: 0 auto; }
	& .ipv--terms { width: min(260px, 64%); margin: 0 auto; }
}
@media (max-width: 560px) {
	& { --ip-sp-sec-t: 36px; --ip-sp-sec-b: 32px; }
	& .ip-plans__grid { grid-template-columns: minmax(0, 1fr); }
	& .ipv-chip:not(.ipv-chip--orb), & .ipf-taphint { display: none; }
}
}
@keyframes ipvSpin { to { transform: rotate(360deg); } }
@keyframes ipvPad { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes ipvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ipvTw { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ipvWave { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ipvBreath { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .55; } }
@keyframes ipvSpark { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ipvScan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes ipvBeam { 0%, 100% { opacity: .3; } 50% { opacity: .75; } }
@keyframes ipvHolo { 0%, 100% { transform: perspective(1000px) translateY(0) rotateY(-12deg) rotateZ(2deg); } 50% { transform: perspective(1000px) translateY(-14px) rotateY(-6deg) rotateZ(1deg); } }
@keyframes ipvBookFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }