/* Winloom site v3 PREVIEW (Seb 2026-11-07): who it's for, security, design partners, FAQ, early-access form, security page */
.v2-ribbon{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;padding:7px 14px;border-radius:30px;pointer-events:none}
.sec{padding:clamp(100px,13vw,170px) 0;position:relative;border-top:1px solid var(--q13)}
.sec h2{font-size:clamp(36px,4.8vw,70px);line-height:.98;letter-spacing:-.035em;font-weight:700;margin:18px 0 22px;max-width:16ch}
.sec h2 .o{color:var(--accent)}
.sec .lead{font-size:18px;color:var(--q80);max-width:52ch}
.sec .head2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
@media(max-width:900px){.sec .head2{grid-template-columns:1fr}}

/* who it's for */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.role-c{background:var(--surface);border:1px solid var(--q13);border-radius:10px;padding:28px 24px 26px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.role-c:hover{border-color:var(--q40);transform:translateY(-4px)}
.role-c .k{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:18px}
.role-c h3{font-size:21px;line-height:1.2;letter-spacing:-.01em;font-weight:650;margin-bottom:14px}
.role-c p{font-size:15px;color:var(--q60)}
.role-c ul{list-style:none;margin-top:18px;border-top:1px solid var(--q13);padding-top:14px}
.role-c li{font-size:14px;color:var(--q80);padding:5px 0 5px 18px;position:relative}
.role-c li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--accent)}
@media(max-width:1080px){.roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.roles{grid-template-columns:1fr}}

/* security band */
.secu{background:var(--surface)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);border-top:1px solid var(--q20);padding-top:34px}
.pillars .n{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:1px;display:block;margin-bottom:18px}
.pillars h3{font-size:17px;font-weight:650;margin-bottom:10px}
.pillars p{font-size:15px;color:var(--q60)}
.more-link{display:inline-flex;gap:10px;margin-top:44px;color:var(--paper);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px}
.more-link .arr{transition:transform .2s}.more-link:hover .arr{transform:translateX(4px)}
@media(max-width:980px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pillars{grid-template-columns:1fr}}

/* design partners */
.dp{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dp .box{border:1px solid var(--q13);border-radius:10px;padding:32px 30px}
.dp .box.get{border-color:rgba(255,90,46,.45);background:linear-gradient(180deg,rgba(255,90,46,.06),transparent 60%)}
.dp h3{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--q60);margin-bottom:20px}
.dp .get h3{color:var(--accent)}
.dp ol{list-style:none;counter-reset:i}
.dp li{counter-increment:i;padding:14px 0 14px 44px;position:relative;border-top:1px solid var(--q13);font-size:16px;color:var(--q80)}
.dp li:first-child{border-top:0}
.dp li b{color:var(--paper);font-weight:600;display:block;margin-bottom:2px}
.dp li::before{content:counter(i,decimal-leading-zero);position:absolute;left:0;top:15px;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:1px}
.dp-note{margin-top:26px;font-size:14px;color:var(--q60)}
@media(max-width:860px){.dp{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--q13)}
.faq details:last-child{border-bottom:1px solid var(--q13)}
.faq summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;font-size:19px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:28px;font-weight:400;color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 26px;color:var(--q80);font-size:16px;max-width:70ch}
.faq .a p+p{margin-top:10px}

/* early-access form, inside the closing section */
.close .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start;position:relative}
.close .formgrid h2{max-width:10ch}
.access{position:relative;background:rgba(20,20,19,.92);border:1px solid var(--q20);border-radius:12px;padding:30px 28px;backdrop-filter:blur(6px)}
.access .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.access label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--q60);margin:0 0 7px}
.access .f{margin-bottom:16px}
.access input,.access select,.access textarea{width:100%;background:var(--ink);border:1px solid var(--q20);border-radius:7px;color:var(--paper);font:inherit;font-size:15px;padding:12px 13px;transition:border-color .2s}
.access textarea{min-height:92px;resize:vertical}
.access select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--q60) 50%),linear-gradient(135deg,var(--q60) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.access input:focus,.access select:focus,.access textarea:focus{outline:none;border-color:var(--accent)}
.access .btn{border:0;cursor:pointer;margin-top:6px}
.access .fine{font-size:12px;color:var(--q40);margin-top:14px}
.access .fine a{color:var(--q60)}
.access .msg{display:none;margin-top:14px;font-size:14px;color:var(--paper);background:rgba(255,90,46,.12);border:1px solid rgba(255,90,46,.4);border-radius:7px;padding:10px 12px}
.access.sent .msg{display:block}
@media(max-width:900px){.close .formgrid{grid-template-columns:1fr}.close .mark{opacity:.25}}
@media(max-width:520px){.access .r2{grid-template-columns:1fr}}

/* security page */
.spage{padding-top:clamp(150px,18vw,230px)}
.spage h1{font-size:clamp(44px,7vw,108px);line-height:.93;letter-spacing:-.045em;font-weight:700;margin:18px 0 30px;max-width:12ch}
.spage h1 .o{color:var(--accent)}
.spage .lead{font-size:clamp(17px,1.5vw,20px);color:var(--q80);max-width:56ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--q20)}
.facts>div{padding:30px 30px 34px 0;border-bottom:1px solid var(--q13)}
.facts>div:not(:nth-child(3n)){border-right:1px solid var(--q13)}
.facts>div:not(:nth-child(3n+1)){padding-left:30px}
.facts .n{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:1px;display:block;margin-bottom:16px}
.facts h3{font-size:19px;font-weight:650;margin-bottom:10px;letter-spacing:-.01em}
.facts p{font-size:15px;color:var(--q60)}
@media(max-width:900px){.facts{grid-template-columns:1fr}.facts>div{border-right:0!important;padding-left:0!important}}
.notdo{margin-top:clamp(70px,9vw,120px);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,5vw,80px)}
.notdo h2{font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.03em;font-weight:700}
.notdo ul{list-style:none}
.notdo li{padding:16px 0 16px 36px;border-top:1px solid var(--q13);position:relative;color:var(--q80);font-size:17px}
.notdo li::before{content:"×";position:absolute;left:4px;top:12px;color:var(--accent);font-size:22px;font-weight:700}
@media(max-width:900px){.notdo{grid-template-columns:1fr}}
.docs{margin-top:clamp(70px,9vw,120px);border:1px solid var(--q20);border-radius:12px;padding:34px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--surface)}
.docs h3{font-size:22px;font-weight:650;margin-bottom:6px}
.docs p{color:var(--q60);font-size:15px;max-width:60ch}
.close:has(.formgrid) .mark{opacity:.35}
.access p{max-width:none}