/* Zip x Innovative Group: account plans portal. Tokens mirror /clients/zip/summary.html */
:root{--plum:#1A0826;--plum-2:#320E4B;--lilac:#AA8FFF;--lilac-2:#DBCCFF;--lilac-3:#EDE6FF;--violet:#6542BE;--yuzu:#E6FE72;--yuzu-2:#D1E231;
 --off:#FBF9F3;--ink:#1A0826;--ink-soft:#544A5A;--ink-mute:#8C858E;--rule:rgba(26,8,38,.1);--rule-2:rgba(26,8,38,.2);--rule-l:rgba(251,249,243,.14);--rule-l2:rgba(251,249,243,.28);
 --disp:'Archivo',system-ui,sans-serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--off);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:96px}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:800;font-stretch:115%;letter-spacing:-.02em;line-height:1.05}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.hi{color:var(--yuzu)}

/* portal page strip */
.pages{background:var(--plum);border-bottom:1px solid var(--rule-l)}
.pages .wrap{display:flex;gap:6px;align-items:center;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.pages span{font-family:var(--disp);font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,249,243,.45);margin-right:8px}
.pages a{font-family:var(--disp);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(251,249,243,.8);padding:7px 12px;border:1px solid var(--rule-l2);border-radius:999px}
.pages a:hover{border-color:var(--yuzu);color:var(--yuzu)}
.pages a.on{background:var(--yuzu);color:var(--plum);border-color:var(--yuzu)}

/* hero */
.hero{background:var(--plum);color:var(--off);padding:72px 0 60px}
.lock{font-family:var(--disp);font-weight:800;font-stretch:118%;font-size:1.05rem;margin-bottom:36px}
.lock b{color:var(--yuzu)}
.crumb{font-family:var(--disp);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,249,243,.5);margin-bottom:14px}
.crumb a{text-decoration:none;color:rgba(251,249,243,.75)}
.crumb a:hover{color:var(--yuzu)}
.eyebrow,.kick{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yuzu);margin-bottom:22px}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:18ch;margin-bottom:22px}
.lede{font-size:1.15rem;line-height:1.6;color:rgba(251,249,243,.8);max-width:64ch;margin:0}
.hero-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;padding-top:24px;border-top:1px solid var(--rule-l2)}
.hk{font-family:var(--disp);font-weight:700;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,249,243,.5);margin-bottom:8px}
.hv{font-family:var(--disp);font-weight:700;font-size:1.02rem;line-height:1.4}
.hv span{display:block;font-weight:500;color:rgba(251,249,243,.65);margin-top:4px;font-size:.92rem}

/* sticky section nav */
.toc{position:sticky;top:0;z-index:50;background:var(--plum-2);border-bottom:1px solid var(--rule-l)}
.toc-in{display:flex;overflow-x:auto;scrollbar-width:none}
.toc-in::-webkit-scrollbar{display:none}
.toc a{font-family:var(--disp);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,249,243,.6);text-decoration:none;padding:15px 14px;white-space:nowrap;border-bottom:2px solid transparent}
.toc a:hover{color:var(--off);border-bottom-color:var(--yuzu)}

/* sections */
.sec{padding:72px 0 60px;border-bottom:1px solid var(--rule)}
.sec.tint{background:var(--lilac-3)}
.sec.dark{background:var(--plum);color:var(--off);border-bottom:0}
.sec h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:26ch;margin-bottom:18px}
.sec h3{font-size:1.2rem;font-stretch:108%;margin:40px 0 14px;letter-spacing:-.01em}
.sec h4{font-size:1.02rem;font-stretch:106%;letter-spacing:-.01em;margin-bottom:8px}
.sec p{margin:0 0 14px}
.sec:not(.dark) .kick{color:var(--violet)}
.dark h3{color:var(--off)}
.lead{font-size:1.1rem;line-height:1.6;color:var(--ink-soft);max-width:70ch;margin-bottom:10px!important}
.dark .lead{color:rgba(251,249,243,.78)}
.small{font-size:.9rem;color:var(--ink-mute);max-width:82ch;margin-top:14px!important}
.dark .small{color:rgba(251,249,243,.55)}
.bl{margin:0 0 8px;padding-left:1.1em;max-width:84ch}
.bl li{margin-bottom:12px;line-height:1.55;color:var(--ink-soft)}
.bl li b{font-family:var(--disp);font-weight:700;color:var(--plum)}
.bl ul{margin-top:10px;padding-left:1.1em}
.dark .bl li{color:rgba(251,249,243,.82)}
.dark .bl li b{color:var(--off)}
.note{margin-top:22px;padding:18px 20px;border-left:4px solid var(--yuzu-2);background:#fff;font-size:.96rem;line-height:1.55;color:var(--ink-soft);max-width:84ch}
.note b{font-family:var(--disp);color:var(--plum)}
.dark .note{background:rgba(251,249,243,.06);color:rgba(251,249,243,.82);border-left-color:var(--yuzu)}
.dark .note b{color:var(--yuzu)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule-l2);margin:30px 0 8px}
.stats>div{background:var(--plum);padding:20px 18px}
.sn{font-family:var(--disp);font-weight:900;font-stretch:112%;font-size:1.9rem;letter-spacing:-.03em;color:var(--yuzu);line-height:1;margin-bottom:8px}
.sk{font-size:.9rem;line-height:1.45;color:rgba(251,249,243,.7)}

/* pills, tags, placeholders */
.st{display:inline-block;font-family:var(--disp);font-weight:800;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;white-space:nowrap;line-height:1;vertical-align:middle}
.st.done{background:var(--yuzu);color:var(--plum)}
.st.part{background:var(--lilac);color:var(--plum)}
.st.todo{background:transparent;color:var(--ink-mute);border:1px solid var(--rule-2)}
.st.new{background:var(--violet);color:var(--off)}
.dark .st.todo{color:rgba(251,249,243,.6);border-color:var(--rule-l2)}
.src{display:inline-block;font-family:var(--disp);font-weight:700;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);border:1px solid var(--lilac-2);border-radius:4px;padding:2px 5px;margin-left:4px;vertical-align:2px;line-height:1.2;white-space:nowrap}
.dark .src{color:var(--lilac);border-color:rgba(170,143,255,.4)}
h2 .src,h3 .src{font-size:.56rem;vertical-align:middle}
.tbd{background:var(--lilac-3);border:1px dashed var(--lilac);color:var(--violet);padding:1px 6px;border-radius:4px;font-size:.92em;font-style:italic}
.dark .tbd{background:rgba(170,143,255,.12);color:var(--lilac-2)}

/* tables */
.tbw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 4px}
.tb{width:100%;border-collapse:collapse;font-size:.94rem}
.tb th{font-family:var(--disp);font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--plum);vertical-align:bottom}
.tb td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-soft);line-height:1.5}
.tb td:first-child{font-family:var(--disp);font-weight:700;color:var(--plum)}
.tb td b{font-family:var(--disp);color:var(--plum)}
.tb.wide{min-width:820px}
.tb.dk th{color:rgba(251,249,243,.55);border-bottom-color:var(--yuzu)}
.tb.dk td{color:rgba(251,249,243,.82);border-bottom-color:var(--rule-l)}
.tb.dk td:first-child{color:var(--yuzu);white-space:nowrap}
.tb.num td:first-child{color:var(--violet);width:2.2em}
.tb tr.tot td{font-family:var(--disp);font-weight:800;color:var(--plum);border-bottom:2px solid var(--plum)}
.tint .tb td{border-bottom-color:var(--rule-2)}

/* checklist */
.check{list-style:none;margin:6px 0 0;padding:0;max-width:86ch}
.check li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--rule);color:var(--ink-soft);line-height:1.5}
.check li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:16px;border:1.5px solid var(--violet);border-radius:3px}

/* quote */
.quote{margin:26px 0 6px;max-width:60ch;font-family:var(--disp);font-weight:700;font-stretch:108%;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.015em;line-height:1.3;color:var(--off)}
.quote b{display:block;font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);margin-top:12px;font-stretch:100%}

/* hub grid */
.acc{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.ac{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);padding:22px 22px 18px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
a.ac:hover{border-color:var(--violet);transform:translateY(-2px)}
.ac.live{border-color:var(--yuzu-2);box-shadow:inset 4px 0 0 var(--yuzu-2)}
.ac-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ac-n{font-family:var(--disp);font-weight:900;font-size:.8rem;color:var(--ink-mute);letter-spacing:.06em}
.ac-top .st{margin-left:auto}
.ac h3{font-size:1.5rem;margin:0 0 6px}
.ac .meta{font-family:var(--disp);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.ac p{font-size:.94rem;line-height:1.5;color:var(--ink-soft);margin:0 0 12px}
.ac .go{margin-top:auto;font-family:var(--disp);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.ac:not(.live) .go{color:var(--ink-mute)}

.foot{padding:40px 0;background:var(--plum);color:rgba(251,249,243,.6);font-size:.9rem}
.foot a{color:var(--yuzu);text-decoration:none}

@media (max-width:900px){
 .wrap{padding:0 16px}
 .two,.hero-rail{grid-template-columns:1fr 1fr;gap:20px}
 .stats{grid-template-columns:1fr 1fr}
 .acc{grid-template-columns:1fr}
 .sec{padding:56px 0 48px}
 .hero{padding:56px 0 48px}
}
@media (max-width:560px){.two,.hero-rail{grid-template-columns:1fr}}

/* passphrase gate (same passphrase and session key as the rest of the Zip portal) */
html.gated,body.gated{overflow:hidden!important}
#gate{position:fixed;inset:0;z-index:9999;background:var(--plum);display:flex;align-items:center;justify-content:center;padding:32px;transition:opacity .45s ease}
#gate.out{opacity:0;pointer-events:none}
#gate .gcard{width:100%;max-width:560px;text-align:center}
#gate .gmark{font-family:var(--disp);font-weight:800;font-stretch:118%;font-size:1.1rem;letter-spacing:-.02em;color:rgba(251,249,243,.6);margin-bottom:30px}
#gate .gmark b{color:var(--yuzu)}
#gate h2{font-family:var(--disp);font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.02;font-weight:800;color:var(--off);margin:0 0 14px}
#gate h2 em{font-style:normal;color:var(--yuzu)}
#gate .gsub{font-family:var(--sans);font-size:.98rem;line-height:1.6;color:rgba(251,249,243,.6);max-width:42ch;margin:0 auto 30px}
#gate form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
#gate input{font-family:var(--sans);font-size:16px;letter-spacing:.03em;background:rgba(251,249,243,.06);border:1px solid rgba(251,249,243,.22);color:var(--off);padding:15px 20px;width:min(290px,72vw);outline:none;transition:border-color .25s;border-radius:999px}
#gate input:focus{border-color:var(--yuzu)}
#gate input::placeholder{color:rgba(251,249,243,.34)}
#gate button{font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;background:var(--yuzu);color:var(--plum);border:0;padding:15px 28px;cursor:pointer;border-radius:999px}
#gate .gerr{font-family:var(--disp);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--lilac);height:1.2em;opacity:0;transition:opacity .25s}
#gate .gerr.on{opacity:1}
#gate .ghint{font-family:var(--sans);font-size:.82rem;line-height:1.6;color:rgba(251,249,243,.38);margin-top:26px}
#gate .shake{animation:gsh .4s}
@keyframes gsh{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media print{#gate,.toc,.pages{display:none!important}html.gated,body.gated{overflow:visible!important}}
