/* ============================================================================
   The pages a link leads to.

   Someone who has never heard of Varelyno opens these. So they explain
   themselves, they say plainly what is NOT in them, and they do not try to look
   like the app — a stranger handed a link wants to read something, not learn
   an interface.
   ========================================================================== */

.sv{
  margin:0;background:#f4f8fb;color:#143545;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.sv-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,4vw,34px);background:#fff;border-bottom:1px solid #dce7eb;
}
.sv-brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.sv-ro{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6d8290;border:1px solid #dce7eb;border-radius:999px;padding:4px 11px;
}

.sv-main{max-width:820px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(16px,4vw,24px) 40px}
.sv-main h1{font-size:clamp(26px,4vw,38px);font-weight:680;letter-spacing:-.03em;margin:0 0 10px;line-height:1.15}
.sv-sub{font-size:15px;line-height:1.6;color:#5c7382;margin:0 0 26px;max-width:60ch}
.sv-empty{padding:34px;text-align:center;color:#6d8290;background:#fff;border:1px dashed #dce7eb;border-radius:16px}

/* ------------------------------------------------------------- one project */
.sv-project{
  background:#fff;border:1px solid #dce7eb;border-radius:18px;
  border-top:3px solid var(--pc);padding:clamp(18px,2.4vw,26px);margin-bottom:18px;
}
.sv-p-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.sv-p-head h2{margin:0;font-size:clamp(19px,2.2vw,23px);font-weight:650;letter-spacing:-.025em}
.sv-p-sum{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:#5c7382;max-width:54ch}
.sv-p-meta{display:flex;flex-wrap:wrap;gap:6px}
.sv-chip{
  font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--pc) 11%,#fff);color:color-mix(in srgb,var(--pc) 72%,#143545);
  border:1px solid color-mix(in srgb,var(--pc) 22%,#dce7eb);white-space:nowrap;
}
.sv-chip.late{background:#fdeceF;color:#a8324f;border-color:#f3c9d4}
.sv-next{
  margin:14px 0 0;padding:11px 14px;border-radius:11px;background:#f3f7fa;
  font-size:14.5px;line-height:1.5;
}
.sv-next b{color:#21475d}

.sv-block{margin-top:20px}
.sv-block h3{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#8195a3;
}
.sv-list,.sv-people,.sv-decisions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sv-list li{
  font-size:14.5px;line-height:1.5;padding:8px 12px;border-radius:10px;background:#f7fafc;
  border:1px solid #e8eff3;
}
.sv-list li i{
  font-style:normal;font-size:12px;font-weight:620;color:#6d8290;margin-left:6px;
  white-space:nowrap;
}
.sv-list li i.late{color:#a8324f}
.sv-people{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.sv-people li{
  font-size:14px;padding:9px 12px;border-radius:10px;background:#f7fafc;border:1px solid #e8eff3;
  display:grid;gap:2px;
}
.sv-people li span{font-size:12.5px;color:#6d8290}
.sv-decisions li{
  display:grid;gap:3px;padding:11px 13px;border-radius:11px;
  background:#f7fafc;border:1px solid #e8eff3;border-left:3px solid var(--pc);
}
.sv-decisions li b{font-size:14.5px;font-weight:620;line-height:1.4}
.sv-decisions li span{font-size:13.5px;line-height:1.5;color:#5c7382}
.sv-decisions li i{font-style:normal;font-size:11.5px;font-weight:620;color:#8195a3}

.sv-foot{
  max-width:820px;margin:0 auto;padding:22px clamp(16px,4vw,24px) 46px;
  font-size:13px;line-height:1.6;color:#6d8290;
}
.sv-foot p{margin:0 0 8px}
.sv-foot b{color:#21475d}
.sv-foot a{color:#176a89}

/* ----------------------------------------------------------------- the Ask */
.sv-ask{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}
.sv-askcard{
  width:min(100%,540px);background:#fff;border:1px solid #dce7eb;border-radius:20px;
  padding:clamp(24px,4vw,36px);box-shadow:0 10px 40px rgba(16,50,72,.07);
}
.sv-askcard .sv-brand{margin-bottom:18px}
.sv-askcard h1{font-size:clamp(22px,3.4vw,28px);font-weight:670;letter-spacing:-.028em;margin:0 0 10px;line-height:1.2}
.sv-question{
  margin:0 0 18px;padding:14px 16px;border-radius:13px;border-left:3px solid #1E7FD0;
  background:#f3f8fc;font-size:16px;line-height:1.55;
}
.sv-askcard label{display:block;font-size:13px;font-weight:650;color:#21475d;margin-bottom:6px}
.sv-askcard textarea{
  width:100%;font:inherit;font-size:15px;line-height:1.55;padding:12px 14px;
  border-radius:12px;border:1px solid #c8d9e0;background:#fff;color:#143545;resize:vertical;
}
.sv-askcard textarea:focus{outline:2px solid rgba(30,127,208,.4);outline-offset:1px;border-color:#1E7FD0}
.sv-askcard button{
  margin-top:13px;width:100%;font:inherit;font-size:15px;font-weight:650;cursor:pointer;
  padding:13px 18px;border-radius:12px;border:0;background:#0e67b3;color:#fff;
}
.sv-askcard button:hover{background:#0b5595}
.sv-error{
  margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:14px;
  background:#fdeceF;color:#a8324f;border:1px solid #f3c9d4;
}
.sv-fine{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:#8195a3}

@media(prefers-color-scheme:dark){
  /* Left in light on purpose. These pages are read once by someone who did not
     choose a theme here, and a half-ported dark mode reads worse than none. */
  .sv{color-scheme:light}
}