/* ===== OPV (new kadence.co) design layer ===== */
:root{--paper:#f7f4ee;--paper-2:#efeae0;--paper-3:#e6e0d3;--card:#fbfaf7;--line:#cfc7b8;--line-2:#e2dccf;--ink:#111827;--ink-2:#3b4252;--ink-3:#5b6270;
--magenta:#ee1881;--magenta-text:#c70d69;--magenta-tint:#fce2ee;--pk:#ee1881;--pk2:#c70d69;--body:#3b4252;--mut:#5b6270;--ok:#2fa866;--warn:#e58a2e;
--mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;--sans:Inter,system-ui,Arial,sans-serif;
--rs:6px;--rm:10px;--rl:16px;--ease:cubic-bezier(.2,0,0,1);
--sh:0 1px #0000000a,0 18px 40px -24px #11182773;--sh-s:0 1px #0000000a,0 10px 24px -14px #11182759}
html,body{background:var(--paper);font-family:var(--sans);color:var(--ink)}
#app{background:var(--paper)}
.wash{background:linear-gradient(90deg,#1118270f 1px,#0000 1px),linear-gradient(#1118270f 1px,#0000 1px);background-size:48px 48px;background-position:0 0;-webkit-mask-image:radial-gradient(900px 640px at 46% 46%,#000 40%,#0006 75%,#0000 100%);mask-image:radial-gradient(900px 640px at 46% 46%,#000 40%,#0006 75%,#0000 100%)}
.grain{display:none}
#particles{display:none}
svg{stroke-width:1.6}

/* header: thin rule like the site nav */
.top{left:0;right:0;top:0;height:72px;padding:0 40px;border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px)}
.brand img{width:30px;height:30px;border-radius:6px;box-shadow:none}
.brand b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.brand small,.fb small,.made small{font-family:var(--mono);font-weight:400;letter-spacing:.12em;font-size:9px;color:var(--ink-3)}
.tabs{gap:30px;margin-left:56px}
.tabs a{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);padding:25px 0}
.tabs a:after{height:2px;border-radius:0;background:var(--magenta);bottom:-1px}
.tabs a.on{color:var(--ink)}
.chip{height:34px;border-radius:var(--rs);background:var(--card);border:1px solid var(--line);box-shadow:none;font-size:12.5px;color:var(--ink-2)}
.chip svg{color:var(--magenta)}
.chip.sample{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-color:var(--ink);color:var(--ink);background:transparent}
.icon-btn{color:var(--ink-2)}
.dot.live{background:var(--magenta);box-shadow:none;animation:blink 1.6s ease-in-out infinite}
.dot.heat{background:linear-gradient(90deg,var(--ok),var(--warn),var(--magenta))}
.dot.sens{box-shadow:0 0 0 3px #ee188126}
@keyframes blink{50%{opacity:.25}}

/* stage frame (OPV hero "panel" with mono chrome + hard offset shadow) */
.frame{position:absolute;inset:-6px -2px 6px -2px;border:1px solid var(--ink);border-radius:var(--rm);background:var(--card);box-shadow:6px 6px 0 var(--paper-3);pointer-events:none;z-index:-1;transition:opacity .5s}
.frame .fh{position:absolute;left:14px;right:14px;top:12px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;border-bottom:1px dashed var(--line)}
.frame .fh .sep{width:1px;height:12px;background:var(--line)}
.frame .fh .pkt{color:var(--magenta-text)}
.frame .fh .r{margin-left:auto}
.frame:after{content:"";position:absolute;inset:44px 12px 12px;border-radius:6px;background:var(--paper-2);opacity:.55}
#stage[data-pos=spaces] .frame,#stage[data-pos=week] .frame{opacity:0}
#stage{z-index:5}
.here{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--magenta-text);transform:none}
.drag-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tag3d{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;box-shadow:var(--sh-s);padding:5px 9px 5px 7px}
.tag3d b{font-family:var(--sans);font-size:11.5px;letter-spacing:0;font-weight:600}
.tag3d:after{width:1px;background:var(--ink)}
.tag3d:before{background:var(--ink);width:5px;height:5px}
.tag3d.desk-pop{border-radius:var(--rm);font-family:var(--sans)}

.layers{background:var(--card);border:1px solid var(--line);border-radius:var(--rm);box-shadow:var(--sh-s);padding:4px;gap:4px}
.layers button{border-radius:var(--rs);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);height:30px}
.layers button.on{background:var(--ink);color:var(--paper)}
.toast{background:var(--card);border:1px solid var(--line);border-radius:var(--rm);box-shadow:var(--sh-s);font-size:12.5px;color:var(--ink-2)}
.toast .ic{border-radius:var(--rs);background:var(--magenta-tint);color:var(--magenta-text)}
.toast .ic.g{background:#e3f1e8;color:#1f7a4a}.toast .ic.a{background:#fbeadb;color:#b4621b}

/* type */
.eyebrow{font-family:var(--mono);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;color:var(--ink-3)}
.eyebrow svg{color:var(--magenta)}
.left>.eyebrow:first-child,.left .eyebrow,.eyebrow.pk,.pk{color:var(--magenta-text)}
h1{font-weight:600;letter-spacing:-.03em;font-size:50px;line-height:1.04}
h1 em{color:var(--magenta)}
h1.md{font-weight:600}
.sub{color:var(--ink-2);font-size:15.5px}
h2,h3{font-weight:600!important;letter-spacing:-.02em}

/* left menu: site-nav style rows, active = framed card with offset shadow */
.menu{gap:8px}
.menu a{border-radius:var(--rs);background:var(--card);border:1px solid var(--line-2);box-shadow:none;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;height:44px;color:var(--ink-2)}
.menu a svg{color:var(--ink-3)}
.menu a:hover{border-color:var(--ink);transform:none;box-shadow:4px 4px 0 var(--paper-3)}
.menu a.on{background:var(--card);border-color:var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--paper-3);transform:translate(-2px,-2px)}
.menu a.on svg{color:var(--magenta)}
.menu a.on span:last-child{color:var(--magenta-text)}
.badge{background:var(--magenta);border-radius:4px;font-family:var(--mono);font-weight:500}
.menu a.on .badge{background:var(--magenta);color:#fff}
.note{background:var(--card);border:1px dashed var(--line);border-radius:var(--rm);transform:none;color:var(--ink-2)}
.pin{background:var(--magenta);box-shadow:none;width:8px;height:8px;top:-4.5px}
.avs i,.avs b{border-color:var(--card)}
.avs i:nth-child(1){--c:#A79F8F}.avs i:nth-child(3){--c:#5B6270}.avs i:nth-child(4){--c:#D9D1C2}
.avs b{background:var(--paper-2);color:var(--ink-2);font-family:var(--mono)}

/* cards */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--rl);box-shadow:var(--sh)}
.right{top:104px}
.hero-card{background:var(--card);border:1px solid var(--ink);border-radius:var(--rm);box-shadow:6px 6px 0 var(--paper-3)}
.hero-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--magenta)}
.hero-card h3{font-weight:600;letter-spacing:-.03em}
.hero-card p{color:var(--ink-2)}
.cal-mini{border-radius:var(--rm);border:1px solid var(--ink);border-top:22px solid var(--magenta);box-shadow:4px 4px 0 var(--paper-3);transform:rotate(4deg);background:var(--card)}
.cal-mini b,.cal-mini i{font-family:var(--mono);font-weight:500}
.cal-mini span{font-weight:600}
.btn{border-radius:var(--rs);font-weight:500;font-size:14.5px;height:46px;border:1px solid var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s}
.btn.pk{background:var(--magenta-text);border-color:var(--magenta-text);color:#fff;box-shadow:0 1px #00000014,0 8px 20px -10px #ee188199}
.btn.pk:hover{transform:translateY(-1px);box-shadow:0 1px #00000014,0 12px 24px -10px #ee1881b3}
.btn.sm{height:34px;font-size:13px}
.row-h>a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.thumb .im{border-radius:var(--rm);background:var(--paper-2);border:1px solid var(--line-2)}
.thumb b{font-weight:600}.thumb span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
.now div{background:transparent;border-radius:0;border-top:1px solid var(--ink);padding:10px 2px 2px}
.now b{font-size:30px;font-weight:600;color:var(--magenta);letter-spacing:-.03em}
.now span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* spaces */
.back{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--ink-2)}
.panel{top:104px;height:700px}
#spacesPanel{background:var(--card);border:1px solid var(--ink);border-radius:var(--rm);box-shadow:6px 6px 0 var(--paper-3)}
.filters button{border-radius:var(--rs);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-color:var(--line);color:var(--ink-2);background:transparent}
.filters button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sp{border-radius:var(--rl);border:1px solid transparent}
.sp:hover{border-color:var(--line-2);box-shadow:var(--sh);background:var(--card)}
.sp .im{border-radius:var(--rm);background:var(--paper-2);border:1px solid var(--line-2)}
.sp h4{font-weight:600}
.sp .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.sp .plus{border-radius:var(--rs);background:var(--magenta-text);box-shadow:none;width:26px;height:26px}
.det-canvas{border-radius:var(--rm);background:var(--paper-2);border:1px solid var(--line-2);background-image:linear-gradient(90deg,#1118270d 1px,#0000 1px),linear-gradient(#1118270d 1px,#0000 1px);background-size:32px 32px}
.det-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.det-info h2{font-weight:600}
.det-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--magenta-text)}
.det-info p{color:var(--ink-2)}
.tags span{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.08em;border:1px solid var(--ink);border-radius:4px;color:var(--ink);background:transparent;padding:4px 8px}
.opts button{border-radius:var(--rs);border-color:var(--line);background:var(--card);color:var(--ink-2)}
.opts button.on{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--paper-3)}
.step{border-radius:var(--rs);border-color:var(--line)}
.step button{border-radius:4px}
.avail{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.det-strip{border-top:1px dashed var(--line)}
.det-strip button{border-radius:var(--rm);background:var(--paper-2);border:1px solid var(--line-2)}
.det-strip button.on{border-color:var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--paper-3)}
.fly{border-radius:var(--rm);background:var(--card);border:1px solid var(--ink)}

/* week */
.calendar{top:104px;height:700px;border:1px solid var(--ink);border-radius:var(--rm);box-shadow:6px 6px 0 var(--paper-3)}
.page.active>.calendar{transform:none}
.tape{display:none}
.cal-head h2{font-weight:600}
.cal-head h2 small{font-family:var(--mono);font-weight:400}
.round{border-radius:var(--rs);border-color:var(--line);background:var(--card)}
.cal-dow{border-bottom:1px solid var(--ink)}
.cal-dow span{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;color:var(--ink-2)}
.cd{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cd:hover{background:var(--paper-2)}
.cd .n{font-family:var(--mono);font-size:13px}
.cd.mute .n{color:#c9c1b2}
.cd.we{background:repeating-linear-gradient(135deg,transparent 0 8px,#cfc7b833 8px 9px)}
.cd.today .n{border:1px solid var(--magenta);border-radius:4px;color:var(--magenta-text)}
.cd.sel{background:var(--magenta-tint);box-shadow:inset 0 0 0 1px var(--magenta)}
.cd .ev{font-size:10.5px;color:var(--ink-2)}
.cd .ev svg{color:var(--magenta)}
.cd .bar{background:var(--paper-3);border-radius:0;height:3px}
.cd .bar i{border-radius:0}
.cal-foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.side{top:118px}
.ticket{border:1px solid var(--ink);border-radius:var(--rm);box-shadow:6px 6px 0 var(--paper-3)}
.ticket .stub{background:var(--magenta-text)}
.ticket .stub:after{background:radial-gradient(circle at 6px 8px,var(--card) 4px,transparent 4.5px) 0 0/12px 16px repeat-y}
.ticket .stub small,.ticket .meta{font-family:var(--mono);font-weight:400}
.ticket .stub b{font-weight:600}
.ticket .left-n b{color:var(--magenta-text)}

/* my day */
.day-panel{top:104px;height:700px;border:1px solid var(--ink);border-radius:var(--rm);box-shadow:6px 6px 0 var(--paper-3)}
.pill{font-family:var(--mono);font-weight:500;border-radius:4px;background:var(--magenta-tint);color:var(--magenta-text);border:1px solid var(--magenta)}
.di{border-radius:var(--rm);border-color:var(--line-2);background:var(--card)}
.di img{border-radius:var(--rs);background:var(--paper-2)}
.di .t span{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.di .time{font-family:var(--mono);font-weight:500;font-size:11px;background:transparent;border:1px solid var(--ink);border-radius:4px}
.di.free{background:var(--magenta-tint);border-color:#f4b3d2}
.gift{border-radius:var(--rm);border-color:var(--line);color:var(--ink-2)}
.gift b{color:var(--magenta-text)}.gift svg{color:var(--magenta)}
.sum{border-top:1px dashed var(--line)}
.sum b.pk{color:var(--magenta-text)}
.day-foot small{font-family:var(--mono);font-weight:400;color:var(--ink-3)}
.day-foot .big{font-weight:600;color:var(--magenta)}
.thanks h2{font-weight:600}
.pass{border:1px solid var(--ink);border-radius:var(--rm);box-shadow:4px 4px 0 var(--paper-3);background:var(--card)}
.pass canvas{border-radius:var(--rs)}
.pass span.pk{color:var(--magenta-text);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;font-weight:500}
.thanks li{border-bottom:1px dashed var(--line)}

/* insights */
.dash{top:104px}
.dash .card{border-radius:var(--rl)}
.kpi b{font-weight:600;color:var(--magenta);letter-spacing:-.03em}
.kpi b small{color:var(--magenta)}
.kpi p{color:var(--ink-2)}
.bar-r .tr{background:var(--paper-3);border-radius:0;height:8px}
.bar-r .tr i{border-radius:0}
.bar-r b{font-family:var(--mono);font-weight:500;font-size:11.5px}
.soon{background:var(--card);border:1px dashed var(--magenta);border-radius:var(--rl)}
.soon-pill{background:var(--magenta-tint);color:var(--magenta-text)}

/* footer */
.bottom{left:0;right:0;bottom:0;height:64px;border-radius:0;background:var(--paper-2);border:0;border-top:1px solid var(--line-2);box-shadow:none;padding:0 40px}
.fb img{border-radius:6px}.fb b{font-weight:600}
.bottom .tag{font-weight:500}
.made{background:transparent;border:1px solid var(--ink);border-radius:var(--rs)}
.made img{border-radius:4px}
.ico a{color:var(--ink-3)}.ico a.on{color:var(--magenta)}
.ico .badge{border-radius:4px}
#stage[data-pos=home]{transform:translate(318px,128px) scale(.84)}
.frame{inset:-46px -6px 4px -6px}
#stage[data-pos=day] .frame,#stage[data-pos=insights] .frame,#stage[data-pos=thanks] .frame{opacity:0}
body[data-page=home] .layers{top:760px}