/* ═══════════════════════════════════════════════════════════════════════════
   quid-pro-quo.ru — экран гостя (/hello) и приглашение (/i/<token>). 23.09.2026, волна 2; с волны 3 —
   поверх общей системы /css/notebook.css (шрифты, токены светлой/тёмной тетради, шапка). Здесь — только
   то, что есть у этих двух экранов: созвездие полароидов, лист приглашения, кнопки входа.
   ═══════════════════════════════════════════════════════════════════════════ */
/* прежние имена → токены notebook.css (тёмная тема приходит сама) */
:root{
  --bg:var(--nb-bg);--surface:var(--nb-paper);--ink:var(--nb-ink);--mut:var(--nb-mut);--line:var(--nb-line);
  --acc:var(--nb-red);--acc-ink:var(--nb-red-ink);--pen:var(--nb-pen);--marker:var(--nb-marker);--tape:var(--nb-tape);
  --btn-bg:var(--nb-btn);--btn-ink:var(--nb-btn-ink);--hand:var(--nb-hand);--body:var(--nb-body);--grid:var(--nb-grid);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{position:relative;overflow-x:clip}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}

h1,h2,h3{margin:0;font-family:var(--hand);font-weight:700;line-height:1}
.fine{font-size:14px;color:var(--mut);margin:16px auto 0;max-width:440px}
.lbl{display:block;margin:0 0 6px;font:700 22px/1 var(--hand);color:var(--pen)}

/* кнопки: чернила + «тень от линейки» */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:6px;border:0;
  background:var(--btn-bg);color:var(--btn-ink);font:600 16px/1.2 var(--body);text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--nb-hard);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--nb-hard)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-hard)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),3px 3px 0 var(--nb-hard)}
.auth{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.auth .btn{background:var(--surface);color:var(--ink);min-width:240px;box-shadow:inset 0 0 0 1.5px var(--ink),3px 3px 0 var(--nb-hard)}
.auth .btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink),4px 4px 0 var(--nb-hard)}
.auth .lg{width:26px;height:26px;border-radius:7px;flex:none}
.acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.soon{margin:24px auto 0;max-width:420px;padding:14px 16px;border:1.5px dashed var(--nb-rule);border-radius:6px;background:var(--surface);font-size:15px}
.soon b{font:700 22px/1 var(--hand);color:var(--pen)}
.okline{display:inline-block;margin:0 0 16px;padding:8px 14px;background:var(--nb-sticky);border-radius:2px;transform:rotate(-1deg);
  box-shadow:0 8px 14px -10px var(--nb-shadow);font:700 22px/1.1 var(--hand);color:var(--nb-sticky-ink)}

/* заметки ручкой на полях */
.hn{position:absolute;font:700 23px/1.05 var(--hand);color:var(--pen);white-space:nowrap;pointer-events:none;z-index:3}
.hn-a{left:1%;top:24%;transform:rotate(-6deg)}
.hn-b{right:4%;bottom:9%;transform:rotate(4deg);color:var(--acc-ink)}

/* ── 1. гость ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:calc(100vh - 150px);min-height:max(620px,calc(100svh - 150px));display:grid;place-items:center;text-align:center;padding:30px 0 80px}
.sky{position:absolute;inset:0;pointer-events:none}
.sky svg.sl{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sky svg.sl line{stroke:var(--acc);stroke-width:1.3;opacity:.5;vector-effect:non-scaling-stroke}
.sky svg.sl line.pen{stroke:var(--pen);opacity:.22;stroke-dasharray:3 6}
/* полароид: белая рамка с «подбородком», наклон, скотч */
.f{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--s)*1px);
  padding:5px 5px 16px;background:var(--nb-photo);border-radius:1px;box-shadow:0 8px 16px -8px var(--nb-shadow);
  transform:translate(-50%,-50%) rotate(var(--rot,-4deg))}
.f i{display:block;aspect-ratio:1;background:var(--nb-empty-photo) center/cover no-repeat;filter:blur(calc(var(--b)*1px)) sepia(.3) saturate(.6);overflow:hidden}
.f::before{content:"";position:absolute;top:-8px;left:50%;width:46%;height:14px;background:var(--tape);transform:translateX(-50%) rotate(var(--tr,3deg));
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 5px,transparent 5px 10px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.f.hub{box-shadow:0 8px 16px -8px var(--nb-shadow),0 0 0 3px var(--marker)}
/* пустое место — «ещё не вклеили»: пунктир карандашом */
.f.slot{background:transparent;box-shadow:none;border:1.5px dashed var(--nb-rule)}
.f.slot::before{display:none}
.f.slot i{background:transparent;filter:none;display:flex;align-items:center;justify-content:center;font:700 26px/1 var(--hand);color:var(--nb-mut);font-style:normal}
.hero-in{position:relative;max-width:720px;padding:0 8px;z-index:2}
.eyebrow{margin:0 0 14px;font:700 26px/1 var(--hand);color:var(--acc-ink)}
.hero h1{font-size:clamp(48px,7vw,86px);line-height:.95}
.hero h1 .h1a{display:block;font-size:.62em;margin-bottom:.12em;color:var(--pen)}
.hero h1 .n{display:inline-block;color:var(--ink);background:linear-gradient(176deg,transparent 52%,var(--marker) 52%,var(--marker) 88%,transparent 88%);padding:0 .16em 0 .1em;line-height:1}
.lead{font-size:clamp(17px,1.6vw,19.5px);max-width:560px;margin:20px auto 0}
.oldcode{margin:22px auto 0;max-width:360px;font-size:14.5px;color:var(--mut)}
.oldcode summary{cursor:pointer;font:700 20px/1.2 var(--hand);color:var(--mut);list-style:none}
.oldcode summary::-webkit-details-marker{display:none}
.oldcode summary::after{content:" ↓"}
.oldcode-f{display:flex;gap:10px;margin-top:10px}
.oldcode input{flex:1;min-width:0;padding:12px 14px;font:16px var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--nb-rule);border-radius:4px}
.oldcode input:focus{outline:none;border-color:var(--pen)}
.oldcode .btn{min-height:46px;padding:10px 16px;font-size:15px}

/* ── 2. приглашение ───────────────────────────────────────────────────────── */
.card{position:relative;background:var(--surface);border-radius:2px;padding:36px 30px 30px 58px;
  background-image:linear-gradient(90deg,transparent 38px,var(--nb-margin) 38px,var(--nb-margin) 39px,transparent 39px);
  box-shadow:0 1px 1px var(--nb-shadow-soft),0 14px 24px -16px var(--nb-shadow)}
.card::before{content:"";position:absolute;top:-12px;left:28px;width:96px;height:26px;background:var(--tape);transform:rotate(-5deg);z-index:2;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.invite{max-width:640px;margin:26px auto 0;text-align:center;transform:rotate(-.4deg)}
.inv-photo{position:relative;display:inline-block;margin:4px 0 22px;padding:8px 8px 36px;background:var(--nb-photo);box-shadow:0 12px 24px -12px var(--nb-shadow);transform:rotate(3deg)}
.inv-photo::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;background:var(--tape);transform:translateX(-50%) rotate(-3deg);z-index:2;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
.inv-photo .cap{position:absolute;left:0;right:0;bottom:6px;font:700 22px/1 var(--hand);color:var(--nb-photo-ink)}
.av{display:inline-block;flex:none;width:var(--z,44px);height:var(--z,44px);overflow:hidden;vertical-align:middle;position:relative;background:var(--nb-empty-photo)}
.av img{display:block;width:100%;height:100%;object-fit:cover}
.av .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:700 60px/1 var(--hand);color:#fff;background:var(--nb-ini-b) linear-gradient(135deg,var(--nb-ini-a),var(--nb-ini-b))}
.av.s{--z:34px}.av.xxl{--z:150px}
.inv-to{margin:0 0 4px;font:700 22px/1 var(--hand);color:var(--acc-ink)}
.inv-h{font-size:clamp(38px,5vw,54px)}
.inv-role{margin:10px 0 0;color:var(--mut)}
.inv-note{margin:20px auto 0;max-width:460px;padding:0}
.inv-note p{margin:0;font-style:italic;font-size:18.5px;line-height:1.55;white-space:pre-line}
.inv-sign{margin:8px 0 0;font:700 28px/1 var(--hand);color:var(--pen)}
.inv-can .lbl{color:var(--nb-sticky-ink)}
.inv-can{margin:24px auto 0;max-width:480px;padding:14px 18px 12px;background:var(--nb-sticky);color:var(--nb-sticky-ink);border-radius:2px;transform:rotate(-1deg);text-align:left;
  box-shadow:0 8px 14px -10px var(--nb-shadow)}
.inv-offer{margin:0;white-space:pre-line}
.inv-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0;font-size:15px;color:var(--mut)}
.faces{display:inline-flex}
.faces .av{margin-left:-6px;padding:2px 2px 6px;background:var(--nb-photo);box-shadow:0 4px 8px -4px var(--nb-shadow);transform:rotate(-5deg);--z:40px;overflow:visible}
.faces .av:nth-child(2n){transform:rotate(6deg)}
.faces .av:first-child{margin-left:0}
.faces .av img{filter:blur(1.5px) sepia(.3)}
.invite .auth{margin-top:24px}
.inv-why{max-width:560px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--mut)}

.foot{padding:36px 0 50px;color:var(--mut);font-size:14px;text-align:center}
.foot a{color:var(--mut)}

/* ── движение: полароиды чуть «дышат» ─────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .f{animation:drift var(--d,14s) ease-in-out infinite;animation-delay:calc(var(--y)*-.15s)}
  @keyframes drift{50%{translate:var(--dx,4px) var(--dy,-7px)}}
}

/* ── телефон ──────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .hn{display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .hero{min-height:0;padding:12px 0 56px}
  /* полоса полароидов над заголовком */
  .sky{position:relative;inset:auto;height:124px;margin:0 -4px 6px}
  .f{width:calc(var(--s)*.6px);padding:3px 3px 10px}
  .f.slot{opacity:.8}
  .hero{display:block;place-items:normal}   /* Chrome выравнивает и блочную раскладку — иначе полоса сжимается в 0 */
  .f.mid{display:none}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .auth .btn{min-width:0;width:100%}
  .card{padding:30px 16px 22px 40px;background-image:linear-gradient(90deg,transparent 26px,var(--nb-margin) 26px,var(--nb-margin) 27px,transparent 27px)}
  .invite{transform:none}
  .av.xxl{--z:124px}
  .oldcode-f{flex-direction:column}
}

/* ═══ 07.10.2026 (uxpack): коротко «что это / кто видит / что получите» до входа и подсказка про вход ═══ */
.why3{list-style:none;margin:18px auto 0;padding:0;max-width:520px;display:grid;gap:8px;text-align:left}
.why3 li{padding:10px 14px;border-left:3px solid var(--nb-rule);background:var(--surface);font-size:15px;line-height:1.5;border-radius:2px}
.why3 b{font:700 20px/1.1 var(--hand);color:var(--pen);margin-right:6px}
.login-hint{max-width:440px;margin:12px auto 0;font-size:14px;line-height:1.5;color:var(--mut)}
.login-hint a{color:var(--pen)}
.hero .why3{margin-top:22px}
.invite .why3{margin-top:22px}
/* 21.10.2026 подпись разработчика (Sunprint) — на всех наших сайтах; не удалять */
.dev-credit{margin:-34px 0 0;padding:0 0 40px;text-align:center;font-size:12px;color:var(--mut)}
.dev-credit a{color:inherit;text-decoration:underline}
.dev-credit-sun{color:#e30613}