/* ============================================================
Bibnor — site theme
------------------------------------------------------------
Additive only: the stylesheet inside index.html is untouched.
This file loads after it and restyles the page. Remove the
to it and the original site comes back as it was.
============================================================ */
/* ------------------------------------------------------------
1. Tokens
------------------------------------------------------------ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
/* palette */
--pm-bg: #FAF8F4; /* paper */
--pm-bg-2: #EDE7DA; /* alternate band */
--pm-card: #FFFFFF;
--pm-hair: #E2DBCC;
--pm-hair-2: #CFC6B3;
--pm-text: #13241B;
--pm-body: #2A382F;
--pm-muted: #435148;
--pm-faint: #56635B;
--pm-green: #1F3D2E; /* the logo tile */
--pm-deep: #0F2A1E; /* hero, campus and footer bands */
--pm-on-deep: #C9D6CE; /* body text on the deep green: 10:1 */
--pm-green-2: #2E6B4E;
--pm-amber: #E8A33D; /* fills and marks */
--pm-amber-ink: #8F560E; /* amber that reads as text on paper */
--pm-emerald: #2E9A6B;
--pm-cyan: #3A8DBA;
--pm-rose: #B8475F;
--pm-shell: 1180px;
--pm-ease: cubic-bezier(.2,.7,.2,1);
--pm-radius: 14px;
--pm-shadow: 0 1px 2px rgba(23,42,33,.05), 0 8px 24px -12px rgba(23,42,33,.12);
/* the site's original typefaces */
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* headings */
--font-mono: 'JetBrains Mono', "SF Mono", "Roboto Mono", monospace;
/* the original stylesheet's tokens, mapped onto this palette */
--paper:#FAF8F4; --paper-panel:#FFFFFF; --ink:#13241B; --ink-soft:#2A382F; --ink-faint:#56635B;
--line:#E6E1D6; --board:#10241B; --board-2:#183528; --board-line:rgba(255,255,255,.12);
--chalk:#F4F6F1; --chalk-dim:#B5C3BA; --accent:#E8A33D; --accent-deep:#8F560E;
/* semantic colours: every text/background pair below meets WCAG AA */
--pm-bg-subtle: #F7F5F0; /* quiet panels inside white cards */
--pm-divider: #F0EDE6; /* row dividers inside cards */
--pm-track: #ECE9E1; /* empty bars, rings, segmented controls */
--pm-hover: rgba(23,42,33,.05);
--pm-control-border:#928B7E; /* form field borders: 3.4:1 on white */
--pm-placeholder: #6B7770; /* 4.7:1 on white */
--pm-icon-muted: #7F8983; /* meaningful grey icons: 3.6:1 */
--pm-green-hover: #2A5140;
--pm-green-bg: #E8F2EC;
--pm-success: #1D6B47; --pm-success-bg: #E2F2E9; --pm-success-strong: #23805A;
--pm-warn: #80500F; --pm-warn-bg: #FBEDD3;
--pm-info: #1F6386; --pm-info-bg: #E1EFF7;
--pm-danger: #A63F58; --pm-danger-bg: #F8E3E8; --pm-danger-strong: #B04660;
--pm-amber-bg: #F6DDB0; /* text selection */
--pm-amber-tint: #FCF5E8; /* "Bibnor" column in the comparison */
--pm-amber-tint-2: #F6E7CB;
--pm-on-amber: #3A2507; /* text on amber fills */
}
:root{ color-scheme:light; } /* the page is light-only: keep native controls light too */
html{ background:var(--pm-bg); }
body{
background:var(--pm-bg); color:var(--pm-body);
font-family:var(--font-display); letter-spacing:0;
}
::selection{ background:var(--pm-amber-bg); color:var(--pm-text); }
:focus-visible{ outline:2px solid var(--pm-green-2); outline-offset:3px; }
#theme{ display:none !important; } /* one theme; the toggle has nothing to do */
.pm-atmos{ display:none; }
.shell{ max-width:var(--pm-shell); padding-inline:32px; }
.ic{
width:1em; height:1em; flex:none; display:inline-block; vertical-align:middle;
fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* ------------------------------------------------------------
2. Type + shared pieces
------------------------------------------------------------ */
.pm-sec{ position:relative; padding-block:clamp(72px,9vw,120px); scroll-margin-top:84px; }
/* full-bleed alternate band behind a .shell section */
.pm-band{ background:var(--pm-bg-2); box-shadow:0 0 0 100vmax var(--pm-bg-2); clip-path:inset(0 -100vmax); }
.pm-kicker{
margin:0 0 12px; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
color:var(--pm-green-2);
}
.pm-h2{
margin:0; font-family:var(--font-serif); font-weight:600;
font-size:clamp(30px,3.7vw,46px); line-height:1.1; letter-spacing:-.015em;
color:var(--pm-text); text-wrap:balance;
}
.pm-sub{ margin:16px 0 0; max-width:56ch; font-size:17px; line-height:1.6; color:var(--pm-muted); }
.pm-sec-head{ max-width:760px; margin-bottom:clamp(36px,4.5vw,56px); }
.pm-sec-head.row{
max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap;
}
.pm-sec-head.row .pm-sub{ max-width:42ch; margin:0; }
.pm-sec-head.center{ margin-inline:auto; text-align:center; }
.pm-sec-head.center .pm-sub{ margin-inline:auto; }
.pm-grad{ color:inherit; } /* plain text; no gradient fill */
.inline-link{ color:var(--pm-green-2); text-underline-offset:3px; }
.pm-card{
position:relative; background:var(--pm-card);
border:1px solid var(--pm-hair); border-radius:var(--pm-radius);
box-shadow:0 1px 2px rgba(23,42,33,.04);
transition:border-color .2s var(--pm-ease), box-shadow .2s var(--pm-ease);
}
.pm-card:hover{ border-color:var(--pm-hair-2); box-shadow:var(--pm-shadow); }
.pm-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:13px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer;
font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:0;
text-decoration:none; white-space:nowrap;
transition:background .2s var(--pm-ease), border-color .2s var(--pm-ease), color .2s var(--pm-ease);
}
.pm-btn-primary{ background:var(--pm-green); color:#fff; }
.pm-btn-primary:hover{ background:var(--pm-green-hover); }
.pm-btn-ghost{ background:var(--pm-card); color:var(--pm-text); border-color:var(--pm-hair-2); }
.pm-btn-ghost:hover{ border-color:var(--pm-text); }
.pm-btn .arw{ transition:transform .2s var(--pm-ease); }
.pm-btn:hover .arw{ transform:translateX(3px); }
/* the original .btn/#cta rules add a glow and a magnetic hover; keep it calm */
.btn.pm-btn{ box-shadow:none; }
.btn.pm-btn:hover{ background:var(--pm-green-hover); box-shadow:none; }
/* gentle reveal */
.js [data-rv]{ opacity:0; transform:translateY(12px); }
@media (prefers-reduced-motion: no-preference){
.js [data-rv]{ transition:opacity .6s var(--pm-ease), transform .6s var(--pm-ease); }
}
.js [data-rv].pm-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js [data-rv]{ opacity:1; transform:none; } }
/* status chips, avatars, small buttons used inside the product mocks */
.av{
display:inline-grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%;
font-style:normal; font-size:10.5px; font-weight:700; color:#23302A;
}
.av.c1{ background:#F4CD8E; } .av.c2{ background:#A6DFC4; } .av.c3{ background:#AED3EC; }
.av.c4{ background:#D2C9F6; } .av.c5{ background:#F5BCCB; }
.st{ font-style:normal; font-size:11px; font-weight:600; white-space:nowrap; padding:3px 9px; border-radius:999px; }
.st.ok { color:var(--pm-success); background:var(--pm-success-bg); }
.st.go { color:var(--pm-warn); background:var(--pm-warn-bg); }
.st.wait{ color:var(--pm-info); background:var(--pm-info-bg); }
.st.mute{ color:var(--pm-muted); background:var(--pm-track); }
.ui-btn{
display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
height:30px; padding:0 12px; border-radius:7px; border:0;
background:var(--pm-green); color:#fff; font-family:var(--font-display); font-style:normal; font-size:12px; font-weight:600; letter-spacing:0;
}
.ui-btn.sm{ height:26px; padding:0 10px; font-size:11.5px; }
.ui-btn.ghost, .ui-btn.sm.ghost{ background:#fff; color:var(--pm-text); box-shadow:inset 0 0 0 1px var(--pm-hair-2); border:0; border-radius:7px; }
.ui-btn.ghost:hover{ color:var(--pm-text); border:0; }
.li-ic{ width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--pm-warn-bg); color:var(--pm-amber-ink); }
.li-ic .ic{ width:15px; height:15px; }
.li-ic.ok{ background:var(--pm-success-bg); color:var(--pm-success); }
.li-ic.warn{ background:var(--pm-danger-bg); color:var(--pm-danger); }
.bar{ display:block; height:6px; border-radius:9px; background:var(--pm-track); overflow:hidden; }
.bar i{ display:block; height:100%; width:var(--v); border-radius:inherit; background:var(--c,var(--pm-amber)); transform-origin:0 50%; }
@media (prefers-reduced-motion: no-preference){
.bar i, .ui-prog i{ animation:pmGrow 1.2s var(--pm-ease) both; }
@keyframes pmGrow{ from{ transform:scaleX(0); } }
.live i, .tag-live i{ animation:pmBlink 2s ease-in-out infinite; }
@keyframes pmBlink{ 50%{ opacity:.3; } }
}
/* ------------------------------------------------------------
3. Header
------------------------------------------------------------ */
.topbar{ padding-top:0; background:rgba(250,248,244,.92); border-bottom:1px solid transparent;
backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
transition:border-color .25s var(--pm-ease), box-shadow .25s var(--pm-ease); }
.topbar.solid, .topbar.pm-stuck{ background:rgba(250,248,244,.94); border-bottom-color:var(--pm-hair); }
.topbar-in{ height:68px; margin-top:0; padding-inline:32px; border:0; border-radius:0; background:none; box-shadow:none; }
.topbar.solid .topbar-in, .topbar.pm-stuck .topbar-in{ background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.brand b, .topbar.solid .brand b{ color:var(--pm-text); }
.brand svg{ box-shadow:none; }
.ann{ display:none; }
.nav-links{ gap:2px; }
.nav-links > a, .nv-btn, .topbar.solid .nav-links > a{
position:relative; padding:8px 12px; border-radius:8px;
font-family:var(--font-display); font-size:14.5px; font-weight:500; letter-spacing:0; text-transform:none;
color:var(--pm-body); background:none;
transition:color .15s, background .15s;
}
.nav-links > a::after{ display:none; }
.nav-links > a:hover, .nv-btn:hover, .nv.open .nv-btn, .topbar.solid .nav-links > a:hover{ color:var(--pm-text); background:var(--pm-hover); }
.nav-links > a.pm-active{ color:var(--pm-text); }
.nv{ position:relative; }
.nv-btn{ display:inline-flex; align-items:center; gap:4px; border:0; cursor:pointer; }
.nv-btn .chev{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s; }
.nv.open .chev{ transform:rotate(180deg); }
.mega{
position:absolute; top:calc(100% + 10px); left:-12px; z-index:60;
width:620px; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:10px;
background:#fff; border:1px solid var(--pm-hair); border-radius:14px;
box-shadow:0 20px 50px -20px rgba(23,42,33,.28);
opacity:0; visibility:hidden; transform:translateY(4px);
transition:opacity .15s, transform .15s, visibility .15s;
}
.mega::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nv.open .mega{ opacity:1; visibility:visible; transform:none; }
@media (hover:hover){ .nv:hover .mega{ opacity:1; visibility:visible; transform:none; } }
.mega-col{ display:grid; gap:2px; align-content:start; }
.mega-h{ margin:6px 10px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--pm-faint); font-family:var(--font-display); }
.nav-links .mega a{
display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px;
text-decoration:none; font-family:var(--font-display); letter-spacing:0; text-transform:none;
}
.nav-links .mega a::after{ display:none; }
.nav-links .mega a:hover{ background:var(--pm-bg); }
.mega .mi{ width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--pm-bg-2); color:var(--pm-green); border:0; }
.mega .mi .ic{ width:17px; height:17px; }
.mega b{ display:block; font-size:14px; font-weight:600; color:var(--pm-text); }
.mega small{ display:block; font-size:12.5px; color:var(--pm-faint); margin-top:1px; }
.mega-card{ margin-top:8px; padding:14px; border-radius:10px; background:var(--pm-bg-2); border:0; }
.mega-card small{ font-family:var(--font-display); font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--pm-faint); margin:0; }
.mega-card b{ font-size:14.5px; margin:4px 0 8px; }
.nav-links .mega-card .mega-link{ display:inline-flex; gap:6px; padding:0; font-size:13.5px; font-weight:600; color:var(--pm-green-2); }
.nav-links .mega-card .mega-link:hover{ background:none; }
.mega-link .ic{ width:14px; height:14px; }
.nav-quiet{ padding:8px 12px; border-radius:8px; font-size:14.5px; font-weight:500; color:var(--pm-body); text-decoration:none; }
.nav-quiet:hover{ color:var(--pm-text); background:var(--pm-hover); }
.topbar .ghost, .topbar.solid .ghost{
height:40px; padding:0 16px; border-radius:9px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:0;
color:var(--pm-text); background:#fff; border:1px solid var(--pm-hair-2);
}
.topbar .pm-nav-cta, .topbar.solid .pm-nav-cta{ background:var(--pm-green) !important; color:#fff !important; border-color:var(--pm-green) !important; box-shadow:none; }
.topbar .pm-nav-cta:hover{ background:var(--pm-green-hover) !important; }
.pm-burger{ display:none; }
.pm-mobile{
position:fixed; inset:0; z-index:49; padding:96px 24px 40px; background:var(--pm-bg);
opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.pm-mobile.open{ opacity:1; visibility:visible; }
.pm-mobile a{ display:block; padding:16px 4px; border-bottom:1px solid var(--pm-hair); text-decoration:none; font-size:20px; font-weight:600; color:var(--pm-text); }
.pm-mobile a span{ display:none; }
@media (max-width:900px){
.nav-links{ display:none; }
.pm-burger{
display:inline-flex; align-items:center; justify-content:center; width:40px !important; height:40px; padding:0 !important;
border-radius:9px; background:#fff; border:1px solid var(--pm-hair-2); cursor:pointer;
}
.pm-burger span, .pm-burger span::before, .pm-burger span::after{ display:block; width:16px; height:1.5px; background:var(--pm-text); position:relative; transition:transform .2s, opacity .2s; }
.pm-burger span::before, .pm-burger span::after{ content:""; position:absolute; left:0; }
.pm-burger span::before{ top:-5px; } .pm-burger span::after{ top:5px; }
.pm-burger.open span{ transform:rotate(45deg); }
.pm-burger.open span::before{ transform:rotate(-90deg); top:0; }
.pm-burger.open span::after{ opacity:0; }
.topbar .ghost:not(.pm-burger), .nav-quiet{ display:none; }
}
/* ------------------------------------------------------------
4. Hero
------------------------------------------------------------ */
.board.hv2{ display:block; min-height:auto; padding:clamp(128px,14vw,168px) 0 0; background:transparent; }
/* the dot-field canvas draws light chalk on dark; invert it so it reads as graph paper */
.hv2 #field{ bottom:auto; height:min(760px,100svh); opacity:.55; filter:invert(1) hue-rotate(180deg) saturate(1.4); }
.hv2 .board-scrim{
bottom:auto; height:min(760px,100svh);
background:
linear-gradient(100deg, var(--pm-bg) 0%, rgba(250,248,244,.9) 42%, rgba(250,248,244,0) 72%),
linear-gradient(to bottom, rgba(250,248,244,0) 55%, var(--pm-bg) 100%);
}
.hv2 .board-copy{ max-width:42rem; }
.hv2 .badge{
display:inline-flex; align-items:center; gap:9px; margin:0 0 22px; padding:0;
background:none; border:0; box-shadow:none; backdrop-filter:none;
font-family:var(--font-display); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--pm-muted);
}
.hv2 .pip{ background:var(--pm-emerald); box-shadow:none; animation:none; }
.hv2 h1{
font-family:var(--font-serif); font-weight:600;
font-size:clamp(42px,5.8vw,74px); line-height:1.04; letter-spacing:-.02em; color:var(--pm-text); text-wrap:balance;
}
.hv2 h1 em{ font-style:italic; font-weight:500; color:var(--pm-green-2); }
.hv2 .board-lede{ margin-top:22px; max-width:46ch; font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--pm-body); }
.hv2 .board-actions{ margin-top:32px; gap:12px; }
.hv2 .switcher, .hv2-trust{ display:none; }
.hv2-stage{ position:relative; z-index:2; margin-top:clamp(52px,6vw,76px); padding-bottom:clamp(56px,7vw,88px); }
.app-wrap{ position:relative; perspective:2400px; }
.app{
display:grid; grid-template-columns:212px minmax(0,1fr); min-height:540px;
border-radius:14px; overflow:hidden; text-align:left;
background:#fff; border:1px solid var(--pm-hair-2);
box-shadow:0 2px 4px rgba(23,42,33,.04), 0 40px 80px -40px rgba(23,42,33,.35);
font-size:13px; color:var(--pm-text); line-height:1.35;
transform:rotateX(var(--tilt,0deg)) scale(var(--ts,1)); transform-origin:50% 0;
}
.app small{ font-size:11.5px; color:var(--pm-faint); }
.app-side{ display:flex; flex-direction:column; gap:18px; padding:16px 12px; background:var(--pm-bg-subtle); border-right:1px solid var(--pm-hair); }
.app-brand{ display:flex; align-items:center; gap:10px; padding:0 6px; }
.app-brand svg{ width:28px; height:28px; border-radius:7px; }
.app-brand b{ display:block; font-size:14px; }
.app-brand small{ display:block; font-size:11px; }
.app-side nav{ display:grid; gap:1px; }
.app-side nav span{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; color:var(--pm-muted); font-size:13px; }
.app-side nav .ic{ width:16px; height:16px; }
.app-side nav .on{ background:#fff; color:var(--pm-text); font-weight:600; box-shadow:0 0 0 1px var(--pm-hair); }
.app-side nav .on .ic{ color:var(--pm-green-2); }
.app-side nav em{ margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700; background:var(--pm-amber); color:var(--pm-on-amber); border-radius:999px; padding:1px 7px; }
.app-me{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; background:#fff; border:1px solid var(--pm-hair); }
.app-me b{ display:block; font-size:12.5px; }
.app-main{ display:flex; flex-direction:column; min-width:0; }
.app-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 18px; border-bottom:1px solid var(--pm-hair); }
.app-search{
display:flex; align-items:center; gap:9px; flex:1; max-width:420px; height:32px; padding:0 10px;
border-radius:8px; background:var(--pm-bg-subtle); border:1px solid var(--pm-hair); color:var(--pm-faint); font-size:12.5px; white-space:nowrap; overflow:hidden;
}
.app-search .ic{ width:15px; height:15px; }
.app-search kbd{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--pm-muted); padding:1px 6px; border-radius:5px; border:1px solid var(--pm-hair-2); background:#fff; }
.app-top-r{ display:flex; align-items:center; gap:14px; color:var(--pm-muted); }
.app-top-r .ic{ width:17px; height:17px; }
.live{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--pm-success); }
.live i, .tag-live i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.app-body{ padding:18px 20px 20px; display:grid; gap:14px; align-content:start; background:var(--pm-bg-subtle); }
.app-hello{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.app-hello b{ display:block; margin-top:2px; font-size:18px; font-weight:650; letter-spacing:-.01em; }
.app-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.app-kpis > div{ position:relative; overflow:hidden; display:grid; gap:3px; padding:13px 14px; border-radius:10px; background:#fff; border:1px solid var(--pm-hair); }
.app-kpis b{ font-size:21px; font-weight:650; letter-spacing:-.02em; }
.app-kpis span{ font-size:11.5px; color:var(--pm-faint); }
.app-kpis .up{ color:var(--pm-success); }
.spark{ position:absolute; right:12px; top:14px; width:62px; height:22px; overflow:visible; }
.spark path{ fill:none; stroke:var(--pm-amber); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.spark.s2 path{ stroke:var(--pm-cyan); } .spark.s3 path{ stroke:var(--pm-emerald); }
.app-grid{ display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:12px; }
.app-card{ display:grid; gap:10px; align-content:start; min-width:0; padding:14px; border-radius:10px; background:#fff; border:1px solid var(--pm-hair); }
.app-card-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.app-card-h b{ font-size:13px; }
.tag-live{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--pm-success); background:var(--pm-success-bg); padding:3px 8px; border-radius:999px; }
.app-queue, .app-appr{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.app-queue li, .app-appr li{ display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:8px; min-width:0; }
.app-queue li + li, .app-appr li + li{ border-top:1px solid var(--pm-divider); border-radius:0; }
.app-queue li > span, .app-appr li > span{ flex:1; min-width:0; }
.app-queue b, .app-appr b{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-queue small, .app-appr small{ display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-appr .ic{ width:16px; height:16px; color:var(--pm-muted); }
.app-queue .av{ width:28px; height:28px; font-size:10px; }
@media (prefers-reduced-motion: no-preference){
.app-queue li.in{ animation:pmRowIn .5s var(--pm-ease) both; }
@keyframes pmRowIn{ from{ opacity:0; transform:translateY(8px); } }
}
.app-ev{ display:flex; align-items:center; gap:12px; }
.app-ev .d{ width:40px; height:44px; flex:none; border-radius:8px; border:1px solid var(--pm-hair); display:grid; place-items:center; align-content:center; background:var(--pm-bg-subtle); }
.app-ev .d b{ font-size:15px; line-height:1; }
.app-ev .d small{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.app-ev .t{ flex:1; min-width:0; display:grid; gap:5px; }
.app-ev .t b{ font-size:12.5px; }
.app-ev .t small{ font-size:11px; }
.app-toasts{ position:absolute; right:-18px; bottom:40px; z-index:5; width:290px; display:grid; gap:8px; }
.toast-card{
display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
background:#fff; border:1px solid var(--pm-hair-2); box-shadow:0 14px 34px -16px rgba(23,42,33,.35);
font-size:12.5px; color:var(--pm-text);
}
.toast-card > span:last-child{ min-width:0; }
.toast-card b{ display:block; font-size:12.5px; font-weight:600; }
.toast-card small{ display:block; font-size:11.5px; color:var(--pm-faint); }
@media (prefers-reduced-motion: no-preference){
.toast-card{ animation:pmToastIn .45s var(--pm-ease) both; }
.toast-card.out{ animation:pmToastOut .35s var(--pm-ease) both; }
@keyframes pmToastIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes pmToastOut{ to{ opacity:0; transform:translateY(-6px); } }
}
@media (min-width:1300px){ .app-toasts{ right:-56px; bottom:-26px; } }
/* "built for" line */
.builtfor{ padding:8px 0 0; }
.builtfor-line{
margin:0; padding-top:28px; border-top:1px solid var(--pm-hair);
font-size:15px; line-height:1.6; color:var(--pm-muted);
}
.builtfor-line b{ color:var(--pm-text); font-weight:600; }
/* ------------------------------------------------------------
5. Portals
------------------------------------------------------------ */
.pt-tabs{
display:flex; gap:4px 28px; flex-wrap:wrap; margin:0 0 28px; padding:0;
border-bottom:1px solid var(--pm-hair); background:none; border-radius:0; width:auto;
}
.pt-tab{
position:relative; display:inline-flex; align-items:center; gap:8px;
height:48px; padding:0 2px; margin-bottom:-1px; border:0; background:none; cursor:pointer; white-space:nowrap;
font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--pm-muted);
transition:color .15s;
}
.pt-tab .ic{ width:17px; height:17px; }
.pt-tab:hover{ color:var(--pm-text); }
.pt-tab[aria-selected="true"]{ color:var(--pm-text); }
.pt-tab[aria-selected="true"] .ic{ color:var(--pm-green-2); }
.pt-tab:focus-visible{ outline:2px solid var(--pm-green-2); outline-offset:2px; border-radius:4px; }
/* the underline doubles as the autoplay timer */
.pt-prog{ position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; opacity:0; }
.pt-prog::after{ content:""; position:absolute; inset:0; background:var(--pm-amber); transform:scaleX(var(--pp,1)); transform-origin:0 50%; }
.pt-tab[aria-selected="true"] .pt-prog{ opacity:1; background:var(--pm-amber-tint-2); }
.pt-panels{ padding:0; border:0; border-radius:0; background:none; overflow:visible; }
.pt-panel{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:center; }
.pt-panel[hidden]{ display:none; }
.pt-panel:focus-visible{ outline:none; }
@media (prefers-reduced-motion: no-preference){
.pt-panel.on .pt-copy, .pt-panel.on .pt-mock{ animation:pmFade .4s var(--pm-ease) both; }
@keyframes pmFade{ from{ opacity:0; } }
}
.pt-k{ display:block; font-size:14px; font-weight:600; color:var(--pm-green-2); }
.pt-copy h3{
margin:10px 0 20px; font-family:var(--font-serif); font-weight:600;
font-size:clamp(25px,2.6vw,32px); line-height:1.15; letter-spacing:-.01em; color:var(--pm-text); text-wrap:balance;
}
.pt-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.pt-list li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.45; color:var(--pm-body); }
.pt-list .ic{ width:18px; height:18px; margin-top:2px; color:var(--pm-green-2); stroke-width:2.2; }
.ui{
display:grid; gap:13px; padding:18px; border-radius:14px; background:#fff;
border:1px solid var(--pm-hair-2); box-shadow:0 30px 60px -36px rgba(23,42,33,.35);
font-size:13px; color:var(--pm-text); line-height:1.35;
}
.ui small{ font-size:11.5px; color:var(--pm-faint); }
.ui-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ui-h small{ display:block; }
.ui-h b{ display:block; margin-top:2px; font-size:16px; font-weight:650; letter-spacing:-.01em; }
.ui-h .ui-pill b{ display:inline; font-size:inherit; margin:0; }
.ui-pill{ font-size:11.5px; font-weight:500; white-space:nowrap; padding:4px 10px; border-radius:999px; background:var(--pm-track); color:var(--pm-muted); }
.ui-pill b{ color:var(--pm-text); }
.ui-pill.amber{ background:var(--pm-warn-bg); color:var(--pm-warn); }
.ui-pill.ok{ background:var(--pm-success-bg); color:var(--pm-success); }
.ui-prog{ height:6px; border-radius:9px; background:var(--pm-track); overflow:hidden; }
.ui-prog i{ display:block; height:100%; width:var(--v); border-radius:inherit; background:var(--pm-amber); transform-origin:0 50%; transition:width .6s var(--pm-ease); }
.ui-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--pm-hair); }
.ui-foot > span:first-child{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--pm-faint); }
.ui-foot .ic{ width:14px; height:14px; }
.ui-sub{ margin:4px 0 -4px; font-size:12px; font-weight:600; color:var(--pm-faint); }
.roster, .ui-list, .shifts, .ledger{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.roster li, .ui-list li{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--pm-divider); transition:background .3s; }
.roster li:first-child, .ui-list li:first-child{ border-top:0; }
.roster li > span:nth-child(2), .ui-list li > span:nth-child(2){ flex:1; min-width:0; }
.roster b, .ui-list b{ display:block; font-size:13.5px; font-weight:600; }
.flag{ color:var(--pm-danger); background:var(--pm-danger-bg); padding:1px 7px; border-radius:999px; font-size:10.5px; }
.seg{ display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:var(--pm-track); flex:none; }
.seg em{ width:28px; height:24px; display:grid; place-items:center; border-radius:6px; font-style:normal; font-size:11px; font-weight:700; color:var(--pm-faint); transition:background .2s, color .2s; }
.seg em.on.p{ background:var(--pm-success-strong); color:#fff; }
.seg em.on.l{ background:var(--pm-amber); color:var(--pm-on-amber); }
.seg em.on.a{ background:var(--pm-danger-strong); color:#fff; }
.roster li.js-pending{ background:var(--pm-amber-tint); }
.roster li.js-done{ background:var(--pm-green-bg); }
.ui-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ui-box{ display:grid; gap:2px; padding:12px 13px; border-radius:10px; background:var(--pm-bg-subtle); }
.ui-box b{ font-size:21px; font-weight:650; letter-spacing:-.02em; }
.ui-box span{ font-size:11px; color:var(--pm-faint); }
/* family phone */
.phone-stage{ position:relative; display:grid; place-items:center; min-height:560px; }
.phone{ width:290px; padding:9px; border-radius:44px; background:#1E2A25; box-shadow:0 40px 80px -40px rgba(23,42,33,.55); }
.phone-in{ position:relative; overflow:hidden; min-height:552px; display:grid; gap:11px; align-content:start; padding:12px 16px 80px; border-radius:36px; background:var(--pm-bg); }
.ph-status{ display:flex; align-items:center; justify-content:space-between; padding:2px 8px 6px; }
.ph-status small{ color:var(--pm-text); font-size:11px; font-weight:600; }
.ph-island{ width:86px; height:24px; border-radius:14px; background:#111; }
.ph-hello small{ display:block; font-size:12px; color:var(--pm-faint); }
.ph-hello b{ display:block; font-size:19px; font-weight:650; color:var(--pm-text); }
.ph-kid{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--pm-hair); }
.ph-kid > span{ flex:1; min-width:0; }
.ph-kid b, .ph-row b{ display:block; font-size:12.5px; font-weight:600; color:var(--pm-text); }
.ph-kid small, .ph-row small{ display:block; font-size:11px; color:var(--pm-faint); }
.ph-h{ margin:4px 2px -2px; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--pm-faint); font-family:var(--font-display); }
.ph-row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:#fff; border:1px solid var(--pm-hair); }
.ph-row > span:nth-child(2){ flex:1; min-width:0; }
.ph-bal{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:14px; border-radius:14px; background:var(--pm-green); color:#fff; }
.ph-bal small{ display:block; font-size:11px; color:#BFD3C8; }
.ph-bal b{ display:block; font-size:21px; font-weight:650; }
.ph-tabs{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; justify-content:space-around; padding:11px; border-radius:18px; background:#fff; border:1px solid var(--pm-hair); }
.ph-tabs i{ color:var(--pm-faint); display:grid; }
.ph-tabs i.on{ color:var(--pm-green-2); }
.ph-tabs .ic{ width:19px; height:19px; }
.ph-float{
position:absolute; left:0; bottom:18%; z-index:2; display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px;
background:#fff; border:1px solid var(--pm-hair-2); box-shadow:0 14px 34px -16px rgba(23,42,33,.35);
}
.ph-float b{ display:block; font-size:12.5px; color:var(--pm-text); }
.ph-float small{ display:block; font-size:11.5px; color:var(--pm-faint); }
/* PTO */
@property --p{ syntax:''; inherits:false; initial-value:0; }
.pto-top{ display:flex; align-items:center; gap:18px; }
.ring{ width:104px; height:104px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--pm-emerald) calc(var(--p) * 1%), var(--pm-track) 0); }
@media (prefers-reduced-motion: no-preference){
.pt-panel.on .ring{ animation:pmRing 1.2s var(--pm-ease) both .15s; }
@keyframes pmRing{ from{ --p:0; } }
}
.ring > span{ width:84px; height:84px; border-radius:50%; background:#fff; display:grid; place-items:center; align-content:center; text-align:center; }
.ring b{ font-size:20px; font-weight:650; }
.ring small{ font-size:10.5px; }
.pto-stats{ flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pto-stats div{ padding:10px 12px; border-radius:9px; background:var(--pm-bg-subtle); }
.pto-stats small{ display:block; }
.pto-stats b{ font-size:16px; font-weight:650; }
.shifts li, .ledger li{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--pm-divider); font-size:12.5px; }
.shifts li:first-child, .ledger li:first-child{ border-top:0; }
.shifts li > span:first-child, .ledger li > span:first-child{ flex:1; }
.slots{ display:inline-flex; gap:3px; }
.slots i{ width:13px; height:13px; border-radius:3px; background:var(--pm-track); }
.slots i.f{ background:var(--pm-emerald); }
.shifts small{ width:32px; text-align:right; }
.ledger b{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; }
.ledger .in{ color:var(--pm-success); } .ledger .out{ color:var(--pm-danger); }
/* events */
.ev-hero{ display:flex; align-items:center; gap:14px; }
.ev-hero > span:nth-child(2){ flex:1; min-width:0; }
.ev-hero b{ display:block; font-size:17px; font-weight:650; }
.ev-date{ width:50px; height:54px; flex:none; border-radius:10px; display:grid; place-items:center; align-content:center; background:var(--pm-amber); color:var(--pm-on-amber); }
.ev-date small{ color:#5C3A0B; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ev-date b{ font-size:20px; line-height:1; }
.ev-rsvp{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ev-rsvp div{ padding:11px; border-radius:9px; text-align:center; background:var(--pm-bg-subtle); }
.ev-rsvp div:first-child{ background:var(--pm-success-bg); }
.ev-rsvp b{ display:block; font-size:21px; font-weight:650; }
.ev-cap{ display:grid; gap:7px; }
.ev-guests{ display:flex; align-items:center; }
.ev-guests .av{ margin-left:-7px; box-shadow:0 0 0 2px #fff; }
.ev-guests .av:first-child{ margin-left:0; }
.ev-guests em{ margin-left:12px; font-style:normal; font-size:12px; color:var(--pm-muted); }
/* ------------------------------------------------------------
6. Modules
------------------------------------------------------------ */
.mods{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--pm-hair-2); }
.mod{ display:grid; gap:6px; align-content:start; padding:26px 24px 30px 0; border-bottom:1px solid var(--pm-hair); background:none; }
.mod .mi{ width:36px; height:36px; margin-bottom:10px; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid var(--pm-hair); color:var(--pm-green); }
.mod .mi .ic{ width:18px; height:18px; }
.mod b{ font-size:16px; font-weight:600; color:var(--pm-text); }
.mod small{ font-size:14.5px; line-height:1.5; color:var(--pm-muted); max-width:28ch; }
/* ------------------------------------------------------------
7. Security
------------------------------------------------------------ */
.sec-wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,88px); align-items:start; }
.sec-intro{ position:sticky; top:110px; }
.sec-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.sec-badges span{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px; border:1px solid var(--pm-hair-2); background:#fff; font-size:13.5px; font-weight:500; color:var(--pm-text); }
.sec-badges .ic{ width:15px; height:15px; color:var(--pm-green-2); }
.sec-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.sec-item{ display:grid; gap:6px; padding:22px 22px 24px; }
.sec-item .mi{ width:36px; height:36px; margin-bottom:8px; border-radius:9px; display:grid; place-items:center; background:var(--pm-green-bg); color:var(--pm-green-2); border:0; }
.sec-item .mi .ic{ width:18px; height:18px; }
.sec-item b{ font-size:16px; font-weight:600; color:var(--pm-text); }
.sec-item small{ font-size:14.5px; line-height:1.5; color:var(--pm-muted); }
/* ------------------------------------------------------------
8. Integrations
------------------------------------------------------------ */
.int-wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,88px); align-items:start; }
.int-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.int-list li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.45; color:var(--pm-body); }
.int-list .ic{ width:19px; height:19px; margin-top:1px; color:var(--pm-green-2); }
.int-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.int-tile{ display:grid; gap:4px; padding:18px; border-radius:12px; background:#fff; border:1px solid var(--pm-hair); }
.int-tile .ic{ width:22px; height:22px; margin-bottom:8px; color:var(--pm-green); }
.int-tile b{ font-size:15px; font-weight:600; color:var(--pm-text); }
.int-tile small{ font-size:13px; line-height:1.45; color:var(--pm-muted); }
/* ------------------------------------------------------------
9. How it works
------------------------------------------------------------ */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; counter-reset:none; }
.flow::before{ display:none; }
.flow li{ display:grid; gap:6px; align-content:start; padding-top:18px; border-top:2px solid var(--pm-text); }
.flow li:nth-child(n+2){ border-top-color:var(--pm-hair-2); }
.flow-n{ width:auto; height:auto; margin:0 0 6px; border:0; background:none; box-shadow:none; display:block; font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--pm-amber-ink); }
.flow b{ font-size:19px; font-weight:600; color:var(--pm-text); }
.flow small{ font-size:15px; line-height:1.55; color:var(--pm-muted); max-width:26ch; }
/* ------------------------------------------------------------
10. Comparison
------------------------------------------------------------ */
.cmp{ border:1px solid var(--pm-hair); border-radius:14px; overflow:hidden; background:#fff; }
.cmp-row{ display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); border-top:1px solid var(--pm-hair); }
.cmp-row:first-child{ border-top:0; }
.cmp-row > span{ display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; font-size:15px; color:var(--pm-body); text-align:center; }
.cmp-row > span:first-child{ justify-content:flex-start; text-align:left; color:var(--pm-text); }
.cmp-head > span{ font-size:13.5px; font-weight:600; color:var(--pm-muted); background:var(--pm-bg-subtle); }
.cmp .us{ background:var(--pm-amber-tint); }
.cmp-head .us{ color:var(--pm-text); font-size:15px; background:var(--pm-amber-tint-2); }
.cmp-head .us svg{ width:22px; height:22px; border-radius:6px; }
.cmp .ic{ width:19px; height:19px; stroke-width:2.2; }
.cmp .ic.y{ color:var(--pm-success); } .cmp .ic.n{ color:var(--pm-danger); } .cmp .ic.m{ color:var(--pm-icon-muted); }
/* ------------------------------------------------------------
11. FAQ
------------------------------------------------------------ */
.faq-wrap{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(32px,6vw,88px); align-items:start; }
.pm-faq{ display:grid; gap:0; max-width:none; border-top:1px solid var(--pm-hair-2); }
.pm-faq details{ border:0; border-bottom:1px solid var(--pm-hair); border-radius:0; background:none; }
.pm-faq details[open]{ background:none; border-color:var(--pm-hair); }
.pm-faq summary{
list-style:none; cursor:pointer; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
font-size:17px; font-weight:600; color:var(--pm-text);
}
.pm-faq summary::-webkit-details-marker{ display:none; }
.pm-faq summary::after{ content:"+"; flex:none; font-size:22px; font-weight:400; line-height:1; color:var(--pm-muted); transition:transform .2s; }
.pm-faq details[open] summary::after{ transform:rotate(45deg); }
.pm-faq .a{ margin:0; padding:0 0 22px; max-width:64ch; font-size:16px; line-height:1.65; color:var(--pm-body); }
/* ------------------------------------------------------------
12. Contact
------------------------------------------------------------ */
.contact{
display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,80px); align-items:start;
padding:0; background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.contact::before{ display:none; }
.contact .eyebrow{ margin:0 0 12px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--pm-green-2); }
.contact h2{ margin:0 0 16px; font-family:var(--font-serif); font-size:clamp(30px,3.6vw,44px); font-weight:600; letter-spacing:-.015em; line-height:1.1; color:var(--pm-text); text-wrap:balance; }
.contact p{ margin:0; max-width:42ch; font-size:17px; line-height:1.6; color:var(--pm-muted); }
.ct-steps{ list-style:none; margin:26px 0 28px; padding:0; display:grid; gap:12px; }
.ct-steps li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--pm-body); }
.ct-steps span{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:600; font-family:var(--font-display); color:var(--pm-green); background:var(--pm-green-bg); border:0; }
.contact .card{ max-width:420px; padding:16px 18px; gap:4px; border-radius:12px; background:#fff; border:1px solid var(--pm-hair); backdrop-filter:none; }
.contact .card .label{ font-family:var(--font-display); font-size:13px; letter-spacing:0; text-transform:none; color:var(--pm-faint); }
.contact .mail{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--pm-text); }
.contact .mail:hover{ color:var(--pm-green-2); }
.contact .copy{ font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0; color:var(--pm-text); background:#fff; border:1px solid var(--pm-hair-2); border-radius:8px; }
.contact .copy:hover{ color:var(--pm-text); border-color:var(--pm-text); background:#fff; }
.ct-form{ display:grid; gap:16px; padding:clamp(22px,3vw,30px); border-radius:16px; background:#fff; border:1px solid var(--pm-hair); box-shadow:var(--pm-shadow); }
.ct-form .f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ct-form label{ display:grid; gap:6px; }
.ct-form label > span, .ct-form legend{ font-size:14px; font-weight:500; color:var(--pm-text); }
.ct-form label > span em{ font-style:normal; color:var(--pm-faint); font-weight:400; }
.ct-form input:not([type="checkbox"]), .ct-form select, .ct-form textarea{
width:100%; font:inherit; font-size:15px; color:var(--pm-text); padding:11px 13px; border-radius:9px; outline:none;
background:#fff; border:1px solid var(--pm-hair-2); transition:border-color .15s, box-shadow .15s;
}
.ct-form textarea{ resize:vertical; min-height:88px; }
.ct-form select{
appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356655D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center;
}
.ct-form ::placeholder{ color:var(--pm-placeholder); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{ border-color:var(--pm-green-2); box-shadow:0 0 0 3px rgba(46,107,78,.15); }
.ct-form .bad{ border-color:var(--pm-rose) !important; box-shadow:0 0 0 3px rgba(184,71,95,.12) !important; }
.ct-form fieldset{ border:0; margin:0; padding:0; min-width:0; }
.ct-form legend{ padding:0; margin-bottom:8px; }
.f-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.f-chips label{ display:inline-flex; position:relative; cursor:pointer; }
.f-chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.f-chips span{ padding:7px 13px; border-radius:8px; border:1px solid var(--pm-hair-2); background:#fff; font-size:14px; color:var(--pm-body); transition:background .15s, border-color .15s; }
.f-chips label:hover span{ border-color:var(--pm-muted); }
.f-chips input:checked + span{ background:var(--pm-green-bg); border-color:var(--pm-green-2); color:var(--pm-green); }
.f-chips input:focus-visible + span{ outline:2px solid var(--pm-green-2); outline-offset:2px; }
.ct-form .pm-btn{ justify-self:start; }
.f-note{ margin:0; font-size:13px; color:var(--pm-faint); }
.f-note.err{ color:var(--pm-rose); }
.f-note.ok{ color:var(--pm-success); }
/* ------------------------------------------------------------
13. Footer
------------------------------------------------------------ */
.site-foot{ margin-top:0; padding-block:0 36px; background:var(--pm-bg-2); border-top:1px solid var(--pm-hair); }
.foot-cta{
display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
padding-block:clamp(52px,6vw,72px); border-bottom:1px solid var(--pm-hair-2); background:none; text-align:left;
}
.foot-cta h2{ margin:0; max-width:24ch; font-family:var(--font-serif); font-weight:600; font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.01em; color:var(--pm-text); }
.foot-cta .board-actions{ margin-top:0; gap:10px; justify-content:flex-start; }
.pm-foot{ display:grid; grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:32px; padding-block:48px 40px; }
.pm-foot .brand{ text-decoration:none; }
.pm-foot .about{ max-width:34ch; margin:14px 0 0; font-size:14.5px; line-height:1.6; color:var(--pm-muted); }
.pm-foot h4{ margin:4px 0 14px; font-size:14px; font-weight:600; color:var(--pm-text); }
.pm-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pm-foot a:not(.brand){ font-size:14.5px; color:var(--pm-muted); text-decoration:none; }
.pm-foot a:not(.brand):hover{ color:var(--pm-text); text-decoration:underline; text-underline-offset:3px; }
.site-foot .foot-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--pm-hair-2); }
.site-foot .foot-note{ margin:0; font-family:var(--font-display); font-size:13.5px; letter-spacing:0; color:var(--pm-faint); }
.site-foot .foot-links a{ font-family:var(--font-display); font-size:13.5px; font-weight:500; letter-spacing:0; color:var(--pm-muted); text-decoration:none; }
.site-foot .foot-links a:hover{ color:var(--pm-text); }
.toast{ font-family:var(--font-display); background:var(--pm-text); color:#fff; font-weight:600; letter-spacing:0; box-shadow:0 12px 30px -12px rgba(23,42,33,.5); }
.progress{ height:2px; background:var(--pm-amber); box-shadow:none; }
/* ------------------------------------------------------------
14. Campus — the one dark band on the page (a chalkboard).
It keeps its own dark tokens so the scene styles below read.
------------------------------------------------------------ */
#campus{
--pm-bg:#0F2A1E; --pm-text:#F2F5F1; --pm-muted:#BCC9C1; --pm-faint:#93A69B;
--pm-hair:rgba(255,255,255,.14); --pm-hair-2:rgba(255,255,255,.24);
--pm-amber:#F0AC46;
background:#0F2A1E; color:var(--pm-muted);
}
#campus .sc-slide h3{ font-family:var(--font-serif); font-weight:600; letter-spacing:-.01em; }
#campus .sc-slide .k, #campus .sc-count{ font-family:var(--font-display); letter-spacing:.02em; text-transform:none; font-size:13px; }
#campus .sc-chips span{ font-family:var(--font-display); font-size:12.5px; letter-spacing:0; }
#campus .pin .lab{ font-family:var(--font-display); letter-spacing:.02em; text-transform:none; font-size:12px; }
#campus .sc-cue{ font-family:var(--font-display); letter-spacing:.04em; text-transform:none; font-size:12px; }
/* ------------------------------------------------------------
14. Campus — scroll-driven 3D scene
------------------------------------------------------------ */
/* clip (not hidden) so position:sticky keeps working */
body{ overflow-x:clip; }
.sc-track{ position:relative; height:calc(100svh + 5 * 78svh); }
.sc-stage{
position:sticky; top:0; height:100svh; min-height:600px;
display:grid; grid-template-columns:minmax(300px,38%) 1fr;
align-items:center; overflow:hidden;
}
/* ---- copy rail ---- */
.sc-copy::after{
content:""; position:absolute; inset:-40vh -14% -40vh -100vw; z-index:-1; pointer-events:none;
background:linear-gradient(90deg, var(--pm-bg) 62%, rgba(16,36,27,.86) 82%, transparent);
}
.sc-copy{ position:relative; z-index:4; padding-left:max(32px, calc((100vw - var(--pm-shell)) / 2)); padding-right:20px; }
.sc-count{
font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--pm-faint);
display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.sc-count b{ color:var(--pm-amber); font-weight:700; }
.sc-count i{ flex:1; max-width:120px; height:1px; background:var(--pm-hair); font-style:normal; position:relative; overflow:hidden; }
.sc-count i::after{
content:""; position:absolute; inset:0; background:var(--pm-amber);
transform:scaleX(var(--prog,0)); transform-origin:0 50%; transition:transform .4s var(--pm-ease);
}
.sc-slides{ position:relative; min-height:270px; }
.sc-slide{
position:absolute; inset:0;
opacity:0; transform:translateY(24px); pointer-events:none;
transition:opacity .6s var(--pm-ease), transform .6s var(--pm-ease);
}
.sc-slide.on{ opacity:1; transform:none; pointer-events:auto; }
.sc-slide .k{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
text-transform:uppercase; color:var(--pm-amber); display:block; margin-bottom:14px;
}
.sc-slide h3{
margin:0 0 14px; font-size:clamp(27px,3.4vw,42px); line-height:1.06;
font-weight:800; letter-spacing:-.038em; color:var(--pm-text); text-wrap:balance;
}
.sc-slide p{ margin:0 0 22px; font-size:15.5px; line-height:1.6; color:var(--pm-muted); max-width:30ch; }
.sc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sc-chips span{
font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--pm-muted);
padding:7px 13px; border-radius:999px;
border:1px solid var(--pm-hair); background:rgba(255,255,255,.06);
}
/* ---- stage / camera ---- */
.sc-scene{ position:relative; height:100%; perspective:1500px; perspective-origin:50% 46%; }
.sc-cam{
position:absolute; inset:0; transform-style:preserve-3d;
transform:translate3d(var(--cx,0px), var(--cy,0px), 0);
will-change:transform;
}
.sc-model{
position:absolute; left:50%; top:50%; width:760px; height:760px; margin:-380px 0 0 -380px;
transform-style:preserve-3d;
transform:rotateX(58deg) rotateZ(var(--rz,-26deg)) scale(var(--sc,1));
will-change:transform;
}
.sc-glow{
position:absolute; left:50%; top:52%; width:120vh; height:120vh; transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(240,172,70,.13), rgba(63,224,168,.05) 42%, transparent 68%);
pointer-events:none; z-index:0;
}
/* ---- boxes ---- */
.bx{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--d); transform-style:preserve-3d; }
.bx > i{ position:absolute; left:0; top:0; transform-origin:0 0; display:block; }
.bx > .t{
width:var(--w); height:var(--d); transform:translateZ(var(--h));
background:linear-gradient(150deg, color-mix(in srgb, var(--top,#26332F) 100%, #fff 8%), var(--top,#26332F));
border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 40px rgba(0,0,0,.6);
}
.bx > .n{ width:var(--w); height:var(--h); transform:rotateX(90deg); background:var(--sideA,#1F2C28); }
.bx > .s{ width:var(--w); height:var(--h); top:var(--d); transform:rotateX(90deg); background:var(--sideA,#1F2C28); }
.bx > .w{ width:var(--d); height:var(--h); transform:rotateZ(90deg) rotateX(90deg); background:var(--sideB,#172321); }
.bx > .e{ width:var(--d); height:var(--h); transform:translateX(var(--w)) rotateZ(90deg) rotateX(90deg); background:var(--sideB,#172321); }
.bx > .n, .bx > .s, .bx > .w, .bx > .e{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
/* lit windows */
.bx > .win{
background-image:repeating-linear-gradient(90deg, transparent 0 8px, var(--lit,rgba(240,172,70,.5)) 8px 12px);
background-size:100% 30%; background-repeat:no-repeat; background-position:0 46%;
transition:filter .6s var(--pm-ease);
}
.zone.on .bx > .win{ filter:brightness(1.55) saturate(1.1); }
/* ---- ground, plates, roads ---- */
.sc-ground{
position:absolute; inset:0; border-radius:34px;
background:
radial-gradient(60% 55% at 50% 45%, #15241F 0%, #0F191C 62%, #0C1417 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 90px 140px -60px rgba(0,0,0,1);
}
.sc-ground::after{
content:""; position:absolute; inset:0; border-radius:34px; opacity:.5;
background-image:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:38px 38px;
mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 82%);
-webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 82%);
}
.pl{
position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--d);
border-radius:var(--r,12px); transform:translateZ(var(--z,1px));
background:var(--fill,rgba(255,255,255,.035));
border:1px solid var(--stroke,rgba(255,255,255,.06));
}
.pl.field{
background:linear-gradient(160deg, rgba(63,224,168,.10), rgba(63,224,168,.03));
border-color:rgba(63,224,168,.20);
}
.pl.field::after{
content:""; position:absolute; inset:14px; border-radius:8px;
border:1px dashed rgba(63,224,168,.28);
}
.pl.road{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.07); }
.pl.road::after{
content:""; position:absolute; left:14px; right:14px; top:50%; height:2px; margin-top:-1px;
background:repeating-linear-gradient(90deg, rgba(240,172,70,.5) 0 14px, transparent 14px 30px);
}
.tree{
position:absolute; left:var(--x); top:var(--y); width:14px; height:14px; margin:-7px;
transform-style:preserve-3d;
}
.tree i{
position:absolute; inset:0; border-radius:50% 50% 46% 46%;
background:linear-gradient(180deg, rgba(63,224,168,.55), rgba(63,224,168,.12));
transform:translateZ(var(--th,18px));
box-shadow:0 0 18px rgba(63,224,168,.28);
}
/* ---- zone highlight ---- */
.zone{
position:absolute; inset:0; transform-style:preserve-3d;
transition:opacity .6s var(--pm-ease), filter .6s var(--pm-ease);
}
.sc-model .zone{ opacity:.72; }
.sc-model .zone.on{ opacity:1; }
.zone.on .t{ filter:brightness(1.5); }
.zone .halo{
position:absolute; left:var(--hx); top:var(--hy);
width:var(--hs,240px); height:var(--hs,240px); margin:calc(var(--hs,240px) / -2);
border-radius:50%; transform:translateZ(1.5px);
background:radial-gradient(circle, rgba(240,172,70,.28), transparent 66%);
opacity:0; transition:opacity .6s var(--pm-ease);
}
.zone.on .halo{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
.zone.on .halo{ animation:scPulse 3.4s ease-in-out infinite; }
@keyframes scPulse{ 0%,100%{ transform:translateZ(1.5px) scale(.9); opacity:.7; } 50%{ transform:translateZ(1.5px) scale(1.12); opacity:1; } }
}
/* ---- pins ---- */
.pin{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; transform-style:preserve-3d; }
.pin .beam{
position:absolute; left:-1px; top:0; width:2px; height:var(--ph,150px);
transform-origin:0 0; transform:rotateX(90deg);
background:linear-gradient(to top, rgba(240,172,70,0), rgba(240,172,70,.85));
opacity:0; transition:opacity .5s var(--pm-ease);
}
.pin .knob{
position:absolute; width:11px; height:11px; margin:-5.5px;
border-radius:50%; background:var(--pm-amber);
transform:translateZ(var(--ph,150px));
box-shadow:0 0 0 4px rgba(240,172,70,.18), 0 0 20px rgba(240,172,70,.95);
opacity:.25; transition:opacity .5s var(--pm-ease), box-shadow .5s var(--pm-ease);
}
.pin .lab{
position:absolute; left:12px; top:-12px; white-space:nowrap;
transform-origin:0 50%;
transform:translateZ(calc(var(--ph,150px) + 2px)) rotateZ(calc(-1 * var(--rz, -26deg))) rotateX(-58deg);
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--pm-text); background:rgba(12,28,21,.92); border:1px solid var(--pm-hair-2);
padding:6px 11px; border-radius:999px;
opacity:0; transition:opacity .5s var(--pm-ease);
}
.pin.on .beam, .pin.on .lab{ opacity:1; }
.pin.on .knob{ opacity:1; }
/* ---- traffic ---- */
.veh{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
@media (prefers-reduced-motion: no-preference){
.veh{ animation:scDrive 9s linear infinite; }
@keyframes scDrive{
0% { transform:translate3d(40px,0,0); opacity:0; }
8% { opacity:1; }
92% { opacity:1; }
100% { transform:translate3d(650px,0,0); opacity:0; }
}
}
.veh .bx > .t{ border-radius:4px; }
/* ---- scene rail ---- */
.sc-rail{
position:absolute; right:clamp(18px,3vw,44px); top:50%; transform:translateY(-50%);
display:grid; gap:14px; z-index:5;
}
.sc-rail button{
width:10px; height:10px; padding:0; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.16); border:1px solid transparent;
transition:background .35s var(--pm-ease), transform .35s var(--pm-ease), box-shadow .35s var(--pm-ease);
}
.sc-rail button[aria-current="true"]{
background:var(--pm-amber); transform:scale(1.35);
box-shadow:0 0 0 4px rgba(240,172,70,.16), 0 0 16px rgba(240,172,70,.8);
}
.sc-cue{
position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:var(--pm-faint); display:flex; align-items:center; gap:9px; z-index:5;
transition:opacity .5s var(--pm-ease);
}
.sc-cue.gone{ opacity:0; }
.sc-cue::after{
content:""; width:1px; height:18px;
background:linear-gradient(to bottom, var(--pm-amber), transparent);
}
@media (max-width:900px){
.sc-track{ height:calc(100svh + 5 * 78svh); }
.sc-stage{ grid-template-columns:1fr; align-items:stretch; }
.sc-scene{ position:absolute; inset:0; perspective-origin:50% 38%; }
.sc-copy{
position:relative; z-index:4; align-self:end;
padding:0 24px calc(env(safe-area-inset-bottom) + 34px);
}
.sc-slides{ min-height:230px; }
.sc-slide h3{ font-size:clamp(24px,7vw,32px); }
.sc-slide p{ max-width:38ch; }
.sc-copy::before{
content:""; position:absolute; left:0; right:0; bottom:0; top:-70px; z-index:-1;
background:linear-gradient(to top, var(--pm-bg) 42%, rgba(16,36,27,.86) 72%, transparent);
}
.sc-rail{ right:12px; }
}
/* ============================================================
v2 — PRODUCT SITE
Portals, modules, security, integrations, contact.
============================================================ */
/* ------------------------------------------------------------
15. Responsive
------------------------------------------------------------ */
@media (max-width:1160px){
.nav-links > a:nth-of-type(n+4){ display:none; }
.app-grid{ grid-template-columns:1.1fr 1fr; }
.app-grid .app-card:nth-child(3){ display:none; }
.mods{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:980px){
.pt-panel, .sec-wrap, .int-wrap, .faq-wrap, .contact{ grid-template-columns:1fr; }
.sec-intro{ position:static; }
.flow{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px; }
.pm-foot{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pm-foot > div:first-child{ grid-column:1 / -1; }
.app-toasts{ right:12px; bottom:16px; width:260px; }
}
@media (max-width:900px){
.app{ grid-template-columns:1fr; min-height:0; }
.app-side{ display:none; }
.app-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hv2 .board-scrim{ height:100%; background:linear-gradient(to bottom, rgba(250,248,244,.9), rgba(250,248,244,.85) 45%, var(--pm-bg) 75%); }
}
@media (max-width:640px){
.shell, .topbar-in{ padding-inline:20px; }
.hv2 h1{ font-size:clamp(36px,10vw,46px); }
.hv2 .board-actions .pm-btn{ width:100%; }
.app-top{ padding:10px 12px; }
.app-search span{ display:none; }
.app-body{ padding:14px; }
.app-hello .ui-btn{ display:none; }
.app-grid{ grid-template-columns:1fr; }
.app-grid .app-card:nth-child(2){ display:none; }
.app-toasts{ display:none; }
.pt-tabs{ flex-wrap:nowrap; overflow-x:auto; gap:22px; scrollbar-width:none; }
.pt-tabs::-webkit-scrollbar{ display:none; }
.ui{ padding:14px; }
.ui-cols .ui-box b{ font-size:18px; }
.pto-top{ flex-direction:column; align-items:stretch; }
.pto-top .ring{ align-self:center; }
.seg em{ width:24px; }
.phone{ transform:scale(.92); }
.ph-float{ display:none; }
.mods{ grid-template-columns:1fr; }
.mod{ padding-right:0; }
.sec-grid, .int-grid{ grid-template-columns:1fr 1fr; }
.flow{ grid-template-columns:1fr; }
.cmp-row{ grid-template-columns:1.3fr repeat(3,minmax(0,.8fr)); }
.cmp-row > span{ padding:13px 8px; font-size:13.5px; }
.cmp-row > span:first-child{ padding-left:14px; }
.cmp-head > span{ font-size:11.5px; }
.cmp-head .us{ flex-direction:column; gap:4px; font-size:12.5px; }
.ct-form .f2{ grid-template-columns:1fr; }
.ct-form .pm-btn{ justify-self:stretch; }
.pm-foot{ grid-template-columns:1fr 1fr; }
.foot-cta .board-actions, .foot-cta .board-actions .pm-btn{ width:100%; }
}
@media (max-width:420px){
.sec-grid, .int-grid{ grid-template-columns:1fr; }
}
/* the contact section's paragraph size shouldn't reach the form's help text */
.contact .f-note{ font-size:13.5px; max-width:none; color:var(--pm-faint); }
.contact .f-note.err{ color:var(--pm-rose); }
.contact .f-note.ok{ color:var(--pm-success); }
/* ------------------------------------------------------------
16. Type — the original Inter, weighted for the light background
------------------------------------------------------------ */
body{ font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
:is(.pm-h2,.hv2 h1,.pt-copy h3,.contact h2,.foot-cta h2,#campus .sc-slide h3,.lg-hero h1,.lg-doc h2,.lg-glance h2){
font-family:var(--font-serif); font-weight:700; letter-spacing:-.025em;
}
.hv2 h1{ font-weight:800; letter-spacing:-.035em; line-height:1.04; }
.hv2 h1 em{ font-style:normal; font-weight:800; color:var(--pm-green-2); }
.pm-sub, .contact p{ font-size:18px; color:var(--pm-body); }
.hv2 .board-lede{ font-size:clamp(17.5px,1.6vw,20px); color:var(--pm-body); }
.nav-links > a, .nv-btn, .nav-quiet{ font-size:15px; color:var(--pm-body); }
.pt-list li, .int-list li{ font-size:17px; color:var(--pm-body); }
.mod b, .sec-item b, .int-tile b{ font-size:17px; }
.mod small, .sec-item small{ font-size:15px; color:var(--pm-muted); }
.int-tile small{ font-size:14px; color:var(--pm-muted); }
.flow b{ font-size:20px; }
.flow small{ font-size:16px; color:var(--pm-muted); }
.pm-faq summary{ font-size:18px; }
.pm-faq .a{ font-size:17px; color:var(--pm-body); }
.cmp-row > span{ font-size:16px; }
.builtfor-line{ font-size:16.5px; color:var(--pm-body); }
.pm-btn{ font-size:16px; font-weight:650; }
.pm-foot a:not(.brand), .pm-foot .about{ font-size:15px; }
.ct-form label > span, .ct-form legend{ font-size:15px; }
.ct-form input:not([type="checkbox"]), .ct-form select, .ct-form textarea{ font-size:16px; } /* 16px stops iOS zooming on focus */
.f-chips span{ font-size:14.5px; }
.brand b{ font-family:var(--font-display); font-weight:800; }
/* ------------------------------------------------------------
17. Phone polish
------------------------------------------------------------ */
.cmp-s{ display:none; }
@media (max-width:640px){
/* compact rows instead of tall stacked cards */
.mod{ grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:3px; padding:16px 0; }
.mod .mi{ grid-row:1 / span 2; margin:2px 0 0; }
.mod small{ max-width:none; }
.sec-grid{ grid-template-columns:1fr; gap:10px; }
.sec-item{ grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:3px; padding:16px; }
.sec-item .mi{ grid-row:1 / span 2; margin:2px 0 0; }
.int-grid{ grid-template-columns:1fr 1fr; gap:8px; }
.int-tile{ padding:14px; }
.int-tile .ic{ margin-bottom:4px; }
.int-tile small{ font-size:13px; }
.flow{ gap:0; }
.flow li{ grid-template-columns:34px minmax(0,1fr); column-gap:8px; padding:16px 0; border-top-width:1px; }
.flow li:first-child{ border-top-width:2px; }
.flow-n{ grid-row:1 / span 2; margin:3px 0 0; }
.flow small{ max-width:none; }
/* short column labels so the comparison fits a phone */
.cmp-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cmp-s{ display:inline; }
.cmp-row{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.75fr)); }
.cmp-head > span{ font-size:12.5px; line-height:1.25; padding:14px 6px; }
/* tab strip: fade the edge so it's clear more tabs sit off to the right */
.pt-tabs{ padding-right:44px; margin-inline:-20px; padding-left:20px;
-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); }
.pt-copy h3{ margin:8px 0 16px; }
.pm-sec{ padding-block:64px; }
.pm-sec-head{ margin-bottom:28px; }
.foot-cta{ padding-block:44px; }
.pm-foot{ padding-block:36px 28px; row-gap:28px; }
}
@media (max-width:640px){
/* comfortable tap areas for thumbs */
.pm-foot ul{ gap:0; }
.pm-foot a:not(.brand){ display:inline-block; padding:10px 0; }
.site-foot .foot-links{ gap:4px 18px; }
.site-foot .foot-links a{ display:inline-block; padding:10px 0; }
.contact .copy{ min-height:40px; padding:0 14px; }
}
@media (max-width:640px){
/* the 3D campus is built at desktop size: shrink it into the top half of
the phone, above the captions. Scale first so the camera pan scales too. */
#campus .sc-cam{ transform:translateY(-15svh) scale(.6) translate3d(var(--cx,0px), var(--cy,0px), 0); }
#campus .pin .lab{ font-size:19px; padding:8px 14px; }
#campus .sc-copy::before{ top:-40px; }
}
@media (max-width:900px){
/* the side shading is for the desktop two-column layout; on phones it covered the model */
#campus .sc-copy::after{ display:none; }
}
/* ------------------------------------------------------------
18. Demo form states
------------------------------------------------------------ */
.f-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-form{ position:relative; }
.ct-form[aria-busy="true"] .pm-btn{ opacity:.7; cursor:progress; }
.ct-form .pm-btn:disabled .arw{ display:none; }
.ct-form.is-sent > :not(.ct-done){ display:none; }
.ct-done{ display:grid; justify-items:start; gap:10px; padding:12px 4px 6px; }
.ct-done[hidden]{ display:none; }
.ct-done:focus{ outline:none; }
.ct-done-ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--pm-success-bg); color:var(--pm-success); margin-bottom:4px; }
.ct-done-ic .ic{ width:22px; height:22px; stroke-width:2.4; }
.ct-done h3{ margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--pm-text); }
.ct-done p{ margin:0 0 8px; font-size:16.5px; line-height:1.6; color:var(--pm-body); max-width:40ch; }
/* ------------------------------------------------------------
19. Colour review fixes (WCAG 2.2 AA)
------------------------------------------------------------ */
/* form fields need a visible edge (3:1), not just a hint of one */
.ct-form input:not([type="checkbox"]), .ct-form select, .ct-form textarea{ border-color:var(--pm-control-border); }
.ct-form ::placeholder{ color:var(--pm-placeholder); opacity:1; }
/* selected interest chips: shown by a tick as well as colour */
.f-chips input:checked + span::before{ content:"\2713"; margin-right:6px; font-weight:700; }
/* the active tab's underline is its state indicator: dark enough to read (5.9:1);
the autoplay timer fills it in ink */
.pt-tab[aria-selected="true"] .pt-prog{ background:var(--pm-green-2); }
.pt-prog::after{ background:var(--pm-text); }
/* ------------------------------------------------------------
20. Colour blocking: deep green hero and footer, livelier accents
------------------------------------------------------------ */
/* hero: the original chalkboard green, with the dashboard overlapping into the page */
.board.hv2{ background:radial-gradient(900px 520px at 78% 18%, #1A4230 0%, transparent 65%), var(--pm-deep); }
.hv2 #field{ filter:none; opacity:.7; }
.hv2 .board-scrim{
background:
linear-gradient(100deg, var(--pm-deep) 0%, rgba(15,42,30,.9) 40%, rgba(15,42,30,0) 75%),
linear-gradient(to bottom, rgba(15,42,30,0) 70%, var(--pm-deep) 100%);
}
.hv2-stage::before{
content:""; position:absolute; z-index:-1; left:-100vmax; right:-100vmax; bottom:0; height:42%;
background:var(--pm-bg);
}
.hv2 .badge{ color:var(--pm-on-deep); }
.hv2 .pip{ background:#5FD49E; }
.hv2 h1{ color:#fff; }
.hv2 h1 em{ color:var(--pm-amber); }
.hv2 .board-lede{ color:var(--pm-on-deep); }
.hv2 .pm-btn-primary, .hv2 .btn.pm-btn{ background:var(--pm-amber); color:#1F1405; }
.hv2 .pm-btn-primary:hover, .hv2 .btn.pm-btn:hover{ background:#F2B456; }
.hv2 .pm-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.hv2 .pm-btn-ghost:hover{ border-color:#fff; }
.hv2 .pm-btn:focus-visible{ outline-color:var(--pm-amber); }
.app{ box-shadow:0 2px 4px rgba(0,0,0,.06), 0 50px 90px -40px rgba(0,0,0,.55); border-color:rgba(255,255,255,.35); }
/* header: dark over the hero, back to paper once you scroll past it */
.topbar:not(.solid){ background:rgba(15,42,30,.82); border-bottom-color:rgba(255,255,255,.08); }
.topbar:not(.solid) .brand b{ color:#fff; }
.topbar:not(.solid) .brand svg{ box-shadow:0 0 0 1px rgba(255,255,255,.18); border-radius:8px; }
.topbar:not(.solid) .nav-links > a, .topbar:not(.solid) .nv-btn, .topbar:not(.solid) .nav-quiet{ color:rgba(255,255,255,.86); }
.topbar:not(.solid) .nav-links > a:hover, .topbar:not(.solid) .nv-btn:hover,
.topbar:not(.solid) .nv.open .nv-btn, .topbar:not(.solid) .nav-quiet:hover{ color:#fff; background:rgba(255,255,255,.1); }
.topbar:not(.solid) .pm-nav-cta{ background:var(--pm-amber) !important; color:#1F1405 !important; border-color:var(--pm-amber) !important; }
.topbar:not(.solid) .pm-nav-cta:hover{ background:#F2B456 !important; }
.topbar:not(.solid) .pm-burger{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }
.topbar:not(.solid) .pm-burger span, .topbar:not(.solid) .pm-burger span::before, .topbar:not(.solid) .pm-burger span::after{ background:#fff; }
/* with the menu open the header sits over the paper-coloured menu */
html.pm-menu-open .topbar{ background:var(--pm-bg); border-bottom-color:var(--pm-hair); }
html.pm-menu-open .topbar .brand b{ color:var(--pm-text); }
html.pm-menu-open .topbar .pm-burger{ background:#fff; border-color:var(--pm-hair-2); }
html.pm-menu-open .topbar .pm-burger span::before, html.pm-menu-open .topbar .pm-burger span::after,
html.pm-menu-open .topbar .pm-burger span{ background:var(--pm-text); }
/* footer: deep green to close the page */
.site-foot{ background:var(--pm-deep); border-top:0; color:var(--pm-on-deep); }
.foot-cta{ border-bottom-color:rgba(255,255,255,.12); }
.foot-cta h2{ color:#fff; }
.site-foot .pm-btn-primary{ background:var(--pm-amber); color:#1F1405; }
.site-foot .pm-btn-primary:hover{ background:#F2B456; }
.site-foot .pm-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.site-foot .pm-btn-ghost:hover{ border-color:#fff; }
.site-foot .brand b, .pm-foot h4{ color:#fff; }
.site-foot .brand svg{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.pm-foot .about, .pm-foot a:not(.brand), .site-foot .foot-links a{ color:var(--pm-on-deep); }
.pm-foot a:not(.brand):hover, .site-foot .foot-links a:hover{ color:#fff; }
.site-foot .foot-note{ color:#A5B6AC; }
.site-foot .foot-top{ border-top-color:rgba(255,255,255,.12); }
.site-foot :focus-visible{ outline-color:var(--pm-amber); }
/* modules: four accent colours instead of one beige */
.mod .mi{ border:0; }
.mod:nth-child(4n+1) .mi{ background:var(--pm-warn-bg); color:var(--pm-amber-ink); }
.mod:nth-child(4n+2) .mi{ background:var(--pm-success-bg); color:var(--pm-success); }
.mod:nth-child(4n+3) .mi{ background:var(--pm-info-bg); color:var(--pm-info); }
.mod:nth-child(4n+4) .mi{ background:var(--pm-danger-bg); color:var(--pm-danger); }
.int-tile .ic{ color:var(--pm-green-2); }
.pm-kicker, .contact .eyebrow, .pt-k{ color:var(--pm-amber-ink); }
/* ------------------------------------------------------------
21. Phones: bigger type, pill tabs, sticky call to action
------------------------------------------------------------ */
.m-cta{ display:none; }
@media (max-width:900px){
.hv2 .board-scrim{ height:min(760px,100svh); background:linear-gradient(to bottom, rgba(15,42,30,.55), rgba(15,42,30,.88)); }
}
@media (max-width:640px){
.hv2 h1{ font-size:clamp(40px,11.4vw,50px); }
.hv2 .board-lede{ font-size:17.5px; }
.pm-h2, .contact h2{ font-size:32px; line-height:1.12; }
.pt-copy h3{ font-size:25px; }
/* portal tabs become pills; the active one is filled */
.pt-tabs{ border-bottom:0; gap:8px; margin-bottom:22px; }
.pt-tab{ height:42px; padding:0 16px; border-radius:999px; background:#fff; border:1px solid var(--pm-hair-2); margin:0; }
.pt-tab[aria-selected="true"]{ background:var(--pm-green); border-color:var(--pm-green); color:#fff; }
.pt-tab[aria-selected="true"] .ic{ color:var(--pm-amber); }
.pt-prog{ display:none; }
/* sticky "Book a demo" bar; the accessibility button sits at its left */
.m-cta{
position:fixed; z-index:80; left:72px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
border-radius:12px; background:var(--pm-amber); color:#1F1405; text-decoration:none;
font-size:16px; font-weight:700; box-shadow:0 12px 28px -10px rgba(15,42,30,.55);
transform:translateY(160%); transition:transform .3s var(--pm-ease);
}
.m-cta.show{ transform:none; }
.m-cta:focus-visible{ outline:3px solid var(--pm-deep); outline-offset:2px; }
/* room under the footer so the sticky bar never covers its last links */
.site-foot{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
html.pm-menu-open .m-cta{ transform:translateY(160%); }
}
/* ------------------------------------------------------------
22. Phones: swipeable and collapsible lists
------------------------------------------------------------ */
.m-more, .m-dots{ display:none; }
/* footer columns are : always open on larger screens */
.fcol > summary{ list-style:none; cursor:default; }
.fcol > summary::-webkit-details-marker{ display:none; }
.fcol > summary h4{ margin:4px 0 14px; }
@media (min-width:641px){ .fcol > summary{ pointer-events:none; } }
@media (max-width:640px){
/* swipeable rows: cards snap into place, the next one peeks in */
.m-scroller{
display:grid; grid-template-columns:none; grid-auto-flow:column;
overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
margin-inline:-20px; padding:4px 20px 8px; scroll-padding-inline:20px;
scrollbar-width:none;
}
.m-scroller::-webkit-scrollbar{ display:none; }
.m-scroller > *{ scroll-snap-align:start; }
.m-scroller:focus-visible{ outline:2px solid var(--pm-green-2); outline-offset:-2px; }
.sec-grid.m-scroller{ grid-auto-columns:78%; gap:12px; }
.sec-grid.m-scroller .sec-item{ display:grid; grid-template-columns:none; align-content:start; gap:6px; padding:20px; }
.sec-grid.m-scroller .sec-item .mi{ grid-row:auto; margin:0 0 6px; }
.int-grid.m-scroller{ grid-template-rows:repeat(2,auto); grid-auto-columns:44%; gap:10px; }
/* dots under a swipeable row; each dot has a 24px tap area */
.m-dots{ display:flex; justify-content:center; gap:2px; margin-top:10px; }
.m-dots[hidden]{ display:none; }
.m-dots button{ width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.m-dots button::after{ content:""; width:7px; height:7px; border-radius:4px; background:var(--pm-control-border); transition:width .2s var(--pm-ease), background .2s; }
.m-dots button[aria-current="true"]::after{ width:20px; background:var(--pm-green); }
/* modules: first four, then "Show all" */
.mods:not(.open) .mod:nth-child(n+5){ display:none; }
.m-more{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px;
height:46px; border-radius:10px; cursor:pointer;
background:#fff; border:1px solid var(--pm-control-border); color:var(--pm-text);
font-family:var(--font-display); font-size:15px; font-weight:600;
}
.m-more::after{ content:""; width:8px; height:8px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.m-more[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:4px; }
/* footer columns fold into tap-to-open rows */
.pm-foot{ grid-template-columns:1fr; row-gap:0; }
.pm-foot > div:first-child{ margin-bottom:18px; }
.fcol{ border-top:1px solid rgba(255,255,255,.12); }
.fcol:last-of-type{ border-bottom:1px solid rgba(255,255,255,.12); }
.fcol > summary{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; min-height:52px; }
.fcol > summary h4{ margin:0; font-size:15px; }
.fcol > summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--pm-on-deep); transition:transform .2s; }
.fcol[open] > summary::after{ transform:rotate(45deg); }
.fcol > ul{ padding-bottom:10px; }
.fcol > summary:focus-visible{ outline:2px solid var(--pm-amber); outline-offset:2px; }
/* hero dashboard: a shorter queue keeps the first screen tidy */
.app-queue li:nth-child(n+4){ display:none; }
.pm-sec-head{ margin-bottom:24px; }
}