/* Rentl — modern layer. Everything gated by data-m-* on so the Tweaks panel can toggle it. */ /* ---------- SOFTER CORNERS ---------- */ :root[data-m-corners="soft"]{--radius:12px;--radius-sm:8px;--radius-xs:5px;--m-r:12px} :root[data-m-corners="soft"] .btn,:root[data-m-corners="soft"] .spot-cta,:root[data-m-corners="soft"] .suite-cta{border-radius:8px} :root[data-m-corners="soft"] .spot-tag,:root[data-m-corners="soft"] .auto-engine-time,:root[data-m-corners="soft"] .auto-cal-pill,:root[data-m-corners="soft"] .hero-pill{border-radius:5px} :root[data-m-corners="soft"] .appshot{border-radius:20px} :root[data-m-corners="soft"] .auto-engine-card{border-radius:16px;padding:20px} :root[data-m-corners="soft"] .auto-cal-sync{border-radius:10px} :root[data-m-corners="soft"] .features-grid{gap:14px;background:none;border:0;overflow:visible} :root[data-m-corners="soft"] .feature-card{border:1px solid var(--line);border-radius:14px;background:var(--bg-elevated)} :root[data-m-corners="soft"] .feature-icon{border-radius:10px} :root[data-m-corners="soft"] .suite-grid{gap:12px;background:none;border:0;overflow:visible} :root[data-m-corners="soft"] .suite-card{border:1px solid rgba(255,255,255,.08);border-radius:14px} :root[data-m-corners="soft"] .suite-footer{border-radius:14px} :root[data-m-corners="soft"] .plan-card{border-radius:16px} :root[data-m-corners="soft"] .testimonial-card-big{border-radius:18px} /* ---------- SOFT GREEN GLOWS ---------- */ :root[data-m-glow="on"] .hero{position:relative;isolation:isolate} :root[data-m-glow="on"] .hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12% -30% 0 -30%;background:radial-gradient(34% 46% at 74% 44%,rgba(155,194,169,.5),transparent 70%),radial-gradient(28% 36% at 14% 8%,rgba(207,235,221,.85),transparent 70%)} :root[data-m-glow="on"] .page{overflow-x:clip} /* the hero glow bleeds 30% past each side; keep it from widening the page */ :root[data-m-glow="on"] .spotlight{position:relative;isolation:isolate} :root[data-m-glow="on"] .spotlight::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:6%;bottom:6%;right:-8%;width:62%;background:radial-gradient(closest-side,rgba(155,194,169,.42),rgba(221,235,226,.3) 55%,transparent)} :root[data-m-glow="on"] .spotlight.reverse::before{right:auto;left:-8%} :root[data-m-glow="on"] #features,:root[data-m-glow="on"] .how-section,:root[data-m-glow="on"] .auto-band,:root[data-m-glow="on"] .pricing-section,:root[data-m-glow="on"] .suite-section{position:relative;isolation:isolate;overflow:hidden} :root[data-m-glow="on"] #features::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:900px;height:600px;left:-200px;top:-180px;background:radial-gradient(closest-side,rgba(207,235,221,.8),transparent)} :root[data-m-glow="on"] .how-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:1100px;height:500px;left:50%;top:40%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(155,194,169,.4),transparent)} :root[data-m-glow="on"] .auto-band::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:760px;height:760px;right:-120px;top:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(155,194,169,.45),transparent)} :root[data-m-glow="on"] .pricing-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:1200px;height:700px;left:50%;top:18%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(31,95,63,.55),transparent)} :root[data-m-glow="on"] .suite-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:900px;height:600px;right:-200px;top:-120px;background:radial-gradient(closest-side,rgba(31,95,63,.45),transparent)} /* ---------- DARK FEATURE SECTIONS ---------- */ :root[data-m-dark]:not([data-m-dark="off"]) .auto-band{background:var(--bg-deep)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .section-eyebrow{color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .section-title{color:var(--bg)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .section-title em{color:var(--accent-mid);text-decoration-color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .section-sub{color:rgba(242,242,238,.68)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .spot-bullets li{color:rgba(242,242,238,.72)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .spot-bullets strong{color:#fff} :root[data-m-dark]:not([data-m-dark="off"]) .auto-band .spot-bullets svg{color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-engine-card{background:linear-gradient(180deg,#18221C,#111713);border-color:rgba(255,255,255,.09);box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-engine-head{border-bottom-color:rgba(255,255,255,.08)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-engine-title{color:#fff} :root[data-m-dark]:not([data-m-dark="off"]) .auto-engine-title svg{color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-engine-time{background:rgba(155,194,169,.14);color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-job + .auto-job{border-top-color:rgba(255,255,255,.08)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-job-name{color:#fff} :root[data-m-dark]:not([data-m-dark="off"]) .auto-job-meta{color:rgba(242,242,238,.5)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-job-dot{background:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-job-tick{color:var(--accent-mid)} :root[data-m-dark]:not([data-m-dark="off"]) .auto-cal-sync{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} :root[data-m-dark="auto-how"] .how-section{background:var(--bg-deep)} :root[data-m-dark="auto-how"] .how-section .section-eyebrow{color:var(--accent-mid)} :root[data-m-dark="auto-how"] .how-section .section-title{color:var(--bg)} :root[data-m-dark="auto-how"] .how-section .section-title em{color:var(--accent-mid);text-decoration-color:var(--accent-mid)} :root[data-m-dark="auto-how"] .how-section .step h3{color:#fff} :root[data-m-dark="auto-how"] .how-section .step p{color:rgba(242,242,238,.62)} :root[data-m-dark="auto-how"] .how-section .steps-rail::before{background:rgba(255,255,255,.14)} :root[data-m-dark="auto-how"][data-m-glow="on"] .how-section::before{background:radial-gradient(closest-side,rgba(31,95,63,.55),transparent)} /* ---------- LAYERED FLOATING CARDS (spotlights) ---------- */ .m-shot{position:relative;width:100%;max-width:390px;margin:0 auto;isolation:isolate} .m-shot .appshot{position:relative;z-index:1;transform-origin:50% 100%} .m-back{position:absolute;z-index:0;inset:5% -6% -3% 10%;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--m-r,4px);box-shadow:0 30px 60px -40px rgba(15,20,17,.35);transform:rotate(3.5deg)} .spotlight.reverse .m-back{inset:5% 10% -3% -6%;transform:rotate(-3.5deg)} .m-fc{position:absolute;z-index:3;width:196px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--m-r,4px);padding:12px 14px;display:flex;flex-direction:column;gap:5px;box-shadow:0 30px 60px -26px rgba(15,20,17,.45),0 0 0 1px rgba(15,20,17,.03);font-family:var(--sans);color:var(--ink);transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg));will-change:transform} .m-fc.a{top:12%;left:-64px;--rot:-3deg} .m-fc.b{bottom:14%;right:-66px;--rot:2.5deg} .m-fc small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase} .m-fc b{font-size:22px;font-weight:600;letter-spacing:-.035em;line-height:1.05} .m-fc b.sm{font-size:14px;letter-spacing:-.015em;line-height:1.25} .m-fc em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--muted)} .m-fc .m-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .m-pl{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.08em;padding:3px 6px;border-radius:var(--radius-xs,2px);white-space:nowrap} .m-pl.g{background:var(--accent-soft);color:var(--accent)}.m-pl.a{background:var(--warn-soft);color:var(--warn)}.m-pl.r{background:var(--danger-soft);color:var(--danger)}.m-pl.b{background:#DFE7F0;color:#2F5A85} .m-bar{height:5px;background:var(--bg-subtle);border-radius:3px;overflow:hidden}.m-bar i{display:block;height:100%;background:var(--accent);border-radius:3px} .m-ic{width:26px;height:26px;border-radius:var(--radius-sm,2px);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}.m-ic svg{width:13px;height:13px} .m-ic.a{background:var(--warn-soft);color:var(--warn)}.m-ic.r{background:var(--danger-soft);color:var(--danger)} :root:not([data-m-float="on"]) .m-fc,:root:not([data-m-float="on"]) .m-back{display:none} @media(max-width:1100px){.m-fc.a{left:-24px}.m-fc.b{right:-24px}} @media(max-width:640px){.m-fc{width:160px;padding:10px 11px}.m-fc b{font-size:18px}.m-fc.a{left:-8px;top:6%}.m-fc.b{right:-8px;bottom:8%}.m-back{display:none}} /* ---------- SCROLL MOTION ---------- */ :root[data-m-motion="on"] .m-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)} :root[data-m-motion="on"] .m-rv.m-in{opacity:1;transform:none} :root[data-m-motion="on"] .m-fc{opacity:0;scale:.88;transition:opacity .6s ease var(--d,.35s),scale .8s cubic-bezier(.3,1.3,.5,1) var(--d,.35s)} :root[data-m-motion="on"] .m-fc.m-in{opacity:1;scale:1} :root[data-m-motion="on"] .m-shot .appshot{transform:perspective(1400px) rotateX(var(--tx,0deg))} :root[data-m-motion="on"] .auto-job-tick{opacity:0;scale:.3;transition:opacity .25s ease,scale .45s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i,0)*.38s + .4s)} :root[data-m-motion="on"] .auto-job-dot{transition:background .3s ease;transition-delay:calc(var(--i,0)*.38s + .4s)} :root[data-m-motion="on"] .auto-band:not(.m-run) .auto-job-dot{background:var(--line-strong);animation:mpulse 1.2s ease-in-out infinite} :root[data-m-motion="on"] .auto-band.m-run .auto-job-tick{opacity:1;scale:1} @keyframes mpulse{50%{opacity:.35}} :root[data-m-motion="on"] .steps-rail::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.3,.7,.2,1) .2s} :root[data-m-motion="on"] .steps-rail.m-in::before{transform:scaleX(1)} :root[data-m-motion="on"] .step-num{scale:.4;opacity:0;transition:scale .6s cubic-bezier(.3,1.6,.5,1),opacity .3s ease;transition-delay:calc(var(--i,0)*.35s + .3s)} :root[data-m-motion="on"] .steps-rail.m-in .step-num{scale:1;opacity:1} /* cursor spotlight on cards */ .feature-card,.suite-card,.plan-card{position:relative} :root[data-m-motion="on"] .feature-card::after,:root[data-m-motion="on"] .suite-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(155,194,169,.22),transparent 70%)} :root[data-m-motion="on"] .suite-card::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(155,194,169,.12),transparent 70%)} :root[data-m-motion="on"] .feature-card:hover::after,:root[data-m-motion="on"] .suite-card:hover::after{opacity:1} :root[data-m-motion="on"] .feature-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .2s} :root[data-m-motion="on"][data-m-corners="soft"] .feature-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(15,20,17,.35)} @media(prefers-reduced-motion:reduce){:root[data-m-motion="on"] .m-rv,:root[data-m-motion="on"] .m-fc{opacity:1;transform:none;scale:1;transition:none}:root[data-m-motion="on"] .auto-job-tick,:root[data-m-motion="on"] .step-num{opacity:1;scale:1}:root[data-m-motion="on"] .steps-rail::before{transform:none}} /* ---------- PHONE ---------- */ /* the floating spotlight cards cover the screenshots at phone width */ @media(max-width:760px){.m-fc{display:none}}