/* Vesper v5: the new layer on top of hero.css + sections.css.
   Look: paper, hairline columns, mono labels, amber highlighter on one phrase per headline,
   square cards with a hard offset shadow, windows with a title bar. */

/* ---------- the closing card's sky ---------- */
.cl-bg{background:linear-gradient(to bottom,#C9DBEC 0%,#DCE8F2 55%,#F2EEE4 100%)}
.cl-bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated}

/* ---------- shared scaffolding: label bar, hairline columns, highlighter ---------- */
.how,.works,.safety,.features,.pricing{--pad:clamp(20px,6vw,96px); --gx:max(14px, calc(var(--pad) - 34px)); --hl:rgba(26,34,64,.12);
  position:relative; padding-top:0}
.how .h-wrap,.works .w-wrap,.safety .s-wrap,.features .f-wrap,.pricing .pr-wrap{margin-top:clamp(64px,9vh,110px)}
@media (min-width: 761px){
  .how::before,.works::before,.features::before,.pricing::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:linear-gradient(var(--hl),var(--hl)) var(--gx) 0/1px 100% no-repeat, linear-gradient(var(--hl),var(--hl)) calc(100% - var(--gx) - 1px) 0/1px 100% no-repeat}
  .safety::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(rgba(243,238,228,.1),rgba(243,238,228,.1)) var(--gx) 0/1px 100% no-repeat, linear-gradient(rgba(243,238,228,.1),rgba(243,238,228,.1)) calc(100% - var(--gx) - 1px) 0/1px 100% no-repeat}
}
.safety .sec-bar{border-color:rgba(243,238,228,.14)}
.safety .sec-label{color:rgba(243,238,228,.7)} .safety .sl-n b{color:#FFD58A} .safety .sl-d{color:rgba(243,238,228,.35)} .safety .plus{color:rgba(243,238,228,.55)}
.how > *,.works > *,.safety > *,.features > *,.pricing > *{position:relative}

mark{color:inherit; background:linear-gradient(transparent 7%, #FFD58A 7% 93%, transparent 93%); background-repeat:no-repeat; background-size:0% 100%;
  padding:0 .14em; margin:0 -.04em; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .9s var(--ease) .35s}
.reveal.in mark,.reveal.in.mk mark{background-size:100% 100%}
.safety mark{color:#141C36; background-image:linear-gradient(transparent 7%, #F2A33A 7% 93%, transparent 93%)}
.closing mark{background-size:100% 100%; text-shadow:none}
@media (prefers-reduced-motion: reduce){ mark{background-size:100% 100%; transition:none} }

/* ---------- Works with: the patch board ---------- */
.works{background:#EAF0F5 radial-gradient(rgba(26,34,64,.13) 1px, transparent 1.6px) 0 0/22px 22px; padding:0 var(--pad) clamp(90px,12vh,140px)}
.w-wrap{max-width:1240px; margin-left:auto; margin-right:auto}
.w-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:end}
.works h2{margin:0; font:600 clamp(32px,3.1vw,46px)/1.12 var(--serif); font-variation-settings:"opsz" 60; letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
.w-head p{margin:0; font-size:18px; line-height:1.6; color:var(--ink2); max-width:44ch}

.w-board{position:relative; margin-top:clamp(44px,6vh,72px); display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,250px) minmax(0,1fr); gap:clamp(56px,9vw,150px); align-items:center}
.w-cables{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0}
.w-col,.w-hub{position:relative; z-index:1}
.w-h{display:flex; gap:1em; margin:0 0 14px; font:400 11.5px/1 var(--mono); font-stretch:92%; letter-spacing:.08em; text-transform:uppercase; color:rgba(26,34,64,.55)}
.w-h span + span::before{content:"·"; margin-right:1em; color:rgba(26,34,64,.3)}
.w-tiles{display:grid; gap:10px}
.w-tile{position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:11px 16px; background:#FFFFFF; border:1px solid rgba(26,34,64,.2); border-radius:4px; text-align:left; font:inherit; color:var(--ink); cursor:default;
  transition:border-color .4s, box-shadow .25s, transform .25s var(--ease), opacity .3s}
.w-tile .lg{width:26px; height:26px; flex:none; filter:grayscale(1); opacity:.38; transition:filter .6s, opacity .6s}
.w-tile .wt b{display:block; font:600 15.5px/1.2 var(--sans)}
.w-tile .wt i{display:block; margin-top:2px; font:400 11.5px/1.3 var(--mono); font-stretch:92%; font-style:normal; color:#6A7290}
.w-tile .led{margin-left:auto; flex:none; width:8px; height:8px; border-radius:50%; background:#CBD1DF; text-decoration:none; transition:background .4s, box-shadow .4s}
.w-tile.on{border-color:rgba(26,34,64,.45)}
.w-tile.on .lg{filter:none; opacity:1}
.w-tile.on .led{background:#F2A33A; box-shadow:0 0 0 4px rgba(242,163,58,.2)}
.w-tile.hot,.w-tile:focus-visible{border-color:#141C36; box-shadow:4px 4px 0 #141C36; transform:translate(-2px,-2px)}
.w-board.has-hot .w-tile:not(.hot){opacity:.55}

.cb{fill:none; stroke:rgba(26,34,64,.22); stroke-width:1.4; stroke-dasharray:3 6; stroke-linecap:round; transition:stroke .4s, stroke-width .2s, opacity .3s}
.cb.on{stroke:#E0902A; stroke-dasharray:5 6; animation:flowdash 1.2s linear infinite}
.cb.hot{stroke:#141C36; stroke-width:2.2; opacity:1}
.has-hot .cb:not(.hot){opacity:.2}
.pl{fill:#F2A33A; opacity:0; stroke:#fff; stroke-width:1.4; transition:opacity .4s}
.pl.on{opacity:1}
.dot{fill:#141C36; opacity:0; transition:opacity .4s}
.dot.on{opacity:1}

.w-hub{display:flex; flex-direction:column; align-items:center; gap:22px}
.hub-card{width:100%; padding:30px 18px 22px; border-radius:6px; background:#141C36; color:#F3EEE4; text-align:center; box-shadow:6px 6px 0 #F2A33A}
.hub-mark{width:66px; height:66px; overflow:visible; animation:hubspin 60s linear infinite}
.hub-mark .hpetals path{fill:none; stroke:#F3E7CF; stroke-width:3}
.hub-card b{display:block; margin-top:12px; font:600 26px/1.1 var(--serif); font-variation-settings:"opsz" 40}
.hub-sub{display:block; margin-top:6px; font:400 12px/1.4 var(--mono); font-stretch:92%; color:rgba(243,238,228,.65)}
.hub-n{margin-top:20px; padding-top:16px; border-top:1px dashed rgba(243,238,228,.22)}
.hub-n em{display:block; font:600 40px/1 var(--mono); font-stretch:92%; font-style:normal; color:#FFD58A; font-variant-numeric:tabular-nums}
.hub-n small{display:block; margin-top:6px; font:400 11px/1.3 var(--mono); font-stretch:92%; color:rgba(243,238,228,.6)}
.hub-out{display:flex; flex-direction:column; align-items:center; gap:8px; font:500 12.5px/1 var(--mono); font-stretch:92%; color:var(--ink)}
.hub-out i{display:block; width:2px; height:30px; background:repeating-linear-gradient(to bottom,#F2A33A 0 4px,transparent 4px 8px)}
@keyframes hubspin{to{transform:rotate(360deg)}}

.w-log{margin:clamp(32px,5vh,48px) auto 0; min-height:2.9em; max-width:90ch; text-align:center; font:400 13.5px/1.5 var(--mono); font-stretch:92%; color:var(--ink)}
.w-log .br{color:#A3591A} .w-log em{font-style:normal; color:#A3591A} .w-log b{font-weight:600}
.w-note{max-width:72ch; margin:14px auto 0; text-align:center; font-size:13.5px; line-height:1.55; color:#5B6380}

@media (max-width: 960px){
  .w-head{grid-template-columns:1fr; gap:18px}
}
@media (max-width: 899px){
  .w-board{grid-template-columns:1fr; gap:26px}
  .w-cables{display:none}
  .w-hub{order:-1}
  .hub-card{max-width:300px}
  .hub-out{display:none}
  .w-tiles{grid-template-columns:1fr 1fr; gap:8px}
  .w-tile{padding:10px 12px; gap:10px}
  .w-tile .wt i,.w-tile .led{display:none}
  .w-tile .wt b{font-size:14px}
  .w-tile .lg{width:22px; height:22px}
  .w-log{display:none}
}

/* ---------- Safety: still the dark room, now with ruled cells ---------- */
.guarantees{gap:0; padding:0; border:1px solid rgba(243,238,228,.18); border-radius:4px}
.guarantees li{padding:24px 24px 26px; border-left:1px solid rgba(243,238,228,.18)}
.guarantees li:first-child{border-left:0}
.guarantees b{font-size:18px}
.phone{border-radius:34px}
.ph-app{border-radius:24px}
@media (max-width: 960px){
  .guarantees li:nth-child(odd){border-left:0}
  .guarantees li:nth-child(n+3){border-top:1px solid rgba(243,238,228,.18)}
}
@media (max-width: 760px){
  .guarantees li{border-left:0; border-top:1px solid rgba(243,238,228,.18)}
  .guarantees li:first-child{border-top:0}
}
.levels li.on .lv-n{border-radius:4px}
.lv-n{border-radius:4px}

/* ---------- Features: a numbered list and a window ---------- */
.features{background:#FBF9F4}
.f-list{counter-reset:f}
.f-item h3{display:flex; align-items:baseline; gap:14px}
.f-item h3::before{counter-increment:f; content:"0" counter(f); flex:none; font:500 11.5px/1 var(--mono); font-stretch:92%; letter-spacing:.06em; color:#A3591A}
.f-item p{padding-left:30px}
.fv{border-radius:4px; background:#F1EEE4; border:1px solid #141C36; box-shadow:6px 6px 0 #141C36; padding-top:calc(clamp(24px,3vw,40px) + 34px); overflow:hidden}
.fv::before{content:""; position:absolute; left:0; right:0; top:0; height:34px; border-bottom:1px solid #141C36;
  background:radial-gradient(circle at 17px 17px,#E4795B 4.5px,transparent 5px), radial-gradient(circle at 33px 17px,#F2A33A 4.5px,transparent 5px), radial-gradient(circle at 49px 17px,#8DB08A 4.5px,transparent 5px), #E7E2D3}
.sug,.wa,.cal .d,.bub{border-radius:4px}
@media (max-width: 960px){ .fv{box-shadow:4px 4px 0 #141C36; padding-top:calc(20px + 34px)} }

/* ---------- Pricing: three square cards ---------- */
.pricing{background:#EEF2F6}
.plans{background:transparent; border:0; box-shadow:none; border-radius:0; gap:clamp(18px,2.2vw,30px); grid-template-columns:1fr 1fr 1fr; align-items:stretch}
.plan,.plan + .plan:not(.main),.plan.main + .plan{background:#FFFFFF; border:1px solid #141C36; border-radius:4px; box-shadow:6px 6px 0 #141C36}
.plan.main{margin:0; padding-top:clamp(28px,3vw,40px); padding-bottom:clamp(28px,3vw,40px); border-radius:4px; background:#141C36; box-shadow:6px 6px 0 #F2A33A}
.pl-tag,.ps-when{border-radius:2px}
.plan li{border-top-style:dashed}
.btn.pl-cta{border-radius:3px}
.pilot-steps::before{top:16px}
@media (max-width: 960px){
  .plans{grid-template-columns:1fr}
  .plan,.plan.main{border-radius:4px}
}

/* ---------- Closing: a square card on a hard shadow ---------- */
.closing{background:#EEF2F6}
.cl-card{border-radius:4px; border:1px solid #141C36; box-shadow:8px 8px 0 #141C36}
@media (max-width: 760px){ .cl-card{border-radius:4px; box-shadow:5px 5px 0 #141C36} }

/* ---------- Footer: the logo disclaimer ---------- */
.ft-disc{max-width:1240px; margin:16px auto 0; font-size:12.5px; line-height:1.6; color:rgba(243,238,228,.5)}
@media (max-width: 760px){ .how,.works,.safety,.features,.pricing{--pad:20px} }