/* The Key Project — thekeyproject.ink
   Шрифт self-hosted, файлы в /fonts/. Внешних запросов нет. JS нет. */

@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/SpaceMono-Regular.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/SpaceMono-Italic.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/SpaceMono-Bold.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:italic;font-weight:700;font-display:swap;
  src:url("../fonts/SpaceMono-BoldItalic.woff2") format("woff2");}

:root{
  --bg:#000;
  --ink:#ffffff;       /* заголовки, акценты в тексте */
  --body:#ededed;      /* основной текст — почти белый */
  --legal:#bfbfbf;     /* юридические страницы */
  --muted:#95a5a6;     /* подписи, плейсхолдеры, мелочь в футере */
  --blue:#1C2BFF;
  --line:#262626;
  --card-line:#5a5a5a;   /* рамка карточек — заметнее общих линий */
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--mono);font-weight:400;font-size:16px;line-height:1.7;
}

.wrap{max-width:900px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- заголовки: все фирменным синим ---------- */
h1,h2,h3,h4{color:var(--blue);font-weight:700;line-height:1.3;margin:0 0 16px}
h1{font-size:2.1rem;letter-spacing:.02em}
h2{font-size:32px;margin-top:8px}
h3{font-size:24px;margin-top:36px}
h4{font-size:18px;margin-top:28px}

p{margin:0 0 20px;text-indent:1.8em}
/* красная строка у всех абзацев без исключений; служебные строки — без неё */
.lede,.note,.eyebrow,.tagline,.bio,.foot-cc,.legal .src,li p,td p,figcaption,
p.lines,p.btn-row{text-indent:0}

a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
main a{font-weight:700}
a:hover{color:var(--ink);border-bottom-color:var(--blue)}

strong,b{color:var(--ink);font-weight:700}
em,i{font-style:italic}

hr{border:0;border-top:1px solid var(--line);margin:48px 0}
hr.rule{border-top:1px solid var(--blue);margin:56px 0;opacity:.85}

ul,ol{margin:0 0 20px;padding-left:24px}
li{margin:0 0 10px}

/* ---------- шапка: навигация слева, логотип справа ---------- */
.site-head{border-bottom:1px solid var(--line);padding:18px 0}
.site-head .wrap-wide{display:flex;flex-wrap:nowrap;gap:16px 24px;align-items:center;justify-content:space-between}
nav.main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:2px 10px;font-size:14px}
nav.main a{color:var(--muted);border:0;display:inline-block;
  padding:8px 10px;line-height:1.3;white-space:nowrap}
nav.main a:hover{color:var(--blue)}
nav.main a[aria-current="page"]{color:var(--blue);font-weight:700}
.logo{border:0;display:block;flex:0 0 auto}
.logo img{display:block;width:92px;height:92px}

/* ---------- контент ---------- */
main{padding:52px 0 72px}
.lede{font-size:20px;color:var(--ink);line-height:1.6;margin:0 0 32px}
.tagline{color:var(--blue);font-size:1.3rem;font-weight:700;margin:0 0 44px;line-height:1.4}
.eyebrow{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}

/* ---------- шапка главной: имя, слоган, фото + био ---------- */
.intro h1{margin-bottom:10px}
.bio-row{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:flex-end}
.bio-row img{width:190px;height:auto;flex:0 0 auto;border:1px solid var(--line)}
.bio{font-size:1.12rem;line-height:1.7;text-align:right;margin:0;flex:1 1 340px;min-width:280px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:4px;
  padding:14px 28px;font-family:inherit;font-size:15px;font-weight:700;
  text-decoration:none;margin:6px 10px 6px 0;text-indent:0;
  transition:background .15s ease,color .15s ease;
}
.btn:hover{animation:kp-pulse 1.15s ease-in-out infinite}
.btn-ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
@keyframes kp-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(28,43,255,.55)}
  50%    {transform:scale(1.045);box-shadow:0 0 0 12px rgba(28,43,255,0)}
}
.btn-ghost:hover{animation-name:kp-pulse-ghost}
@keyframes kp-pulse-ghost{
  0%,100%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--blue),0 0 0 0 rgba(28,43,255,.55)}
  50%    {transform:scale(1.045);box-shadow:inset 0 0 0 1px var(--blue),0 0 0 12px rgba(28,43,255,0)}
}
.note{color:var(--muted);font-size:13px;margin:10px 0 0}

h2.h-sm{font-size:22px}
p.big-links{font-size:19px;line-height:2}

/* ---------- страница 1:1 session ---------- */
.session-page > h2{text-align:center}
.hero-a{text-align:center}
.hero-a .pricebar{justify-content:center}
.hero-a .sub{margin-left:auto;margin-right:auto}
.hero-a{border-bottom:1px solid var(--blue);padding:0 0 44px;margin:0 0 56px}
.hero-a h1{font-size:3.4rem;line-height:1.05;margin:0 0 18px;letter-spacing:-.01em}
.hero-a .sub{color:var(--ink);font-size:1.25rem;margin:0 0 36px;text-indent:0;max-width:640px}
.pricebar{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin:0 0 26px}
.pricebar .big{font-size:3rem;font-weight:700;color:var(--blue);line-height:1}
.pricebar .unit{color:var(--muted);font-size:14px}

.spec{border:1px solid var(--card-line);margin:0 0 8px}
.spec .row{display:grid;grid-template-columns:230px 1fr;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:0}
.spec dt{padding:16px 22px;color:var(--muted);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;border-right:1px solid var(--line)}
.spec dd{padding:16px 22px;margin:0;color:var(--ink);font-size:15px}

.steps{counter-reset:step;margin:0 0 8px}
.step{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:26px 0;
  border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{counter-increment:step;content:"0" counter(step);
  color:var(--blue);font-size:2.1rem;font-weight:700;line-height:1}
.step h3{margin:0 0 8px;font-size:19px}
.step p{margin:0;text-indent:0;font-size:15px}

.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 8px}
.terms > div{background:var(--bg);padding:26px 26px 28px;text-align:center}
.terms h4{margin:0 0 10px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.terms p{margin:0 0 10px;text-indent:0;font-size:14px}
.terms p:last-child{margin:0}

.cta-a{border:1px solid var(--blue);padding:36px 32px;text-align:center}
.cta-a p{text-indent:0}

@media(max-width:760px){
  .hero-a h1{font-size:2rem}
  .pricebar .big{font-size:2.2rem}
  .spec .row{grid-template-columns:1fr}
  .spec dt{border-right:0;border-bottom:1px solid var(--line);padding-bottom:6px}
  .step{grid-template-columns:1fr;gap:6px}
  .terms{grid-template-columns:1fr}
}

/* ---------- карточки сравнения ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px;margin:0 0 8px}
.card{border:1px solid var(--card-line);padding:30px 28px 32px;display:flex;flex-direction:column}
.card:hover{border-color:var(--blue)}
.card h3{margin-top:0;font-size:22px;min-height:2.6em;display:flex;align-items:flex-end}
.card ul{list-style:none;padding:0;margin:0 0 26px;font-size:15px}
.card ul li{padding-left:32px;position:relative;color:var(--body)}
.card ul li::before{content:"\2192";position:absolute;left:0;top:-2px;color:var(--blue);font-weight:700;font-size:22px;line-height:1.5}
.price{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:5px 14px;margin:0 0 20px;font-size:17px}
.card .push{margin-top:auto}

/* ---------- изображения ---------- */
img.hero{display:block;width:100%;max-width:860px;height:auto;margin:0 0 40px;border:1px solid var(--line)}
.cover-row{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:36px;align-items:start;margin:0 0 40px}
.cover-row img{width:100%;height:auto;display:block;border:1px solid var(--line)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line)}
details summary{
  cursor:pointer;list-style:none;color:var(--ink);font-weight:700;font-size:17px;
  padding:20px 0 20px 40px;position:relative;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"\2192";position:absolute;left:0;top:16px;color:var(--blue);font-weight:700;font-size:24px}
details[open] summary::before{content:"\2193"}
details summary:hover{color:var(--blue)}
details .answer{padding:0 0 8px 40px}
details .answer p:last-child{margin-bottom:22px}

/* ---------- глоссарий ---------- */
dl.glossary{margin:0}
dl.glossary dt{color:var(--blue);font-weight:700;font-size:20px;margin:36px 0 8px}
dl.glossary dd{margin:0}

/* ---------- юр. страницы ---------- */
.legal{max-width:780px;color:var(--legal)}
.legal h1{font-size:30px}
.legal h2{font-size:19px;margin-top:42px;color:var(--blue)}
.legal p{font-size:14px}
.legal li{font-size:14px}
.legal table{border-collapse:collapse;width:100%;margin:0 0 24px;font-size:13px}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.legal th{color:var(--ink);font-weight:700}
.legal td{text-indent:0}
.legal .src{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:18px;margin-top:44px}

/* ---------- футер: по центру, как на Gumroad ---------- */
.site-foot{border-top:1px solid var(--line);padding:44px 0 56px;margin-top:72px}
.foot-soc{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin:0 0 18px;font-size:1rem;font-weight:700}
.foot-soc a{color:var(--blue);border:0;display:inline-block;padding:7px 11px;line-height:1.3;white-space:nowrap}
.foot-soc a:hover{color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;margin:0 0 20px;font-size:.8rem}
.foot-legal a{color:var(--muted);border:0;display:inline-block;padding:6px 10px;line-height:1.3}
.foot-legal a:hover{color:var(--blue)}
.foot-cc{color:var(--muted);font-size:.8rem;line-height:1.8;margin:0;text-align:center}
.foot-cc a{color:var(--muted)}
.foot-cc a:hover{color:var(--blue)}

/* ---------- мобильные ---------- */
@media (max-width:640px){
  body{font-size:15px}
  /* кнопки по центру — только на узких экранах */
  .btn{display:block;width:fit-content;margin:12px auto;text-align:center}
  .card .btn{margin-left:auto;margin-right:auto}
  .card .note,.note{text-align:center}
  nav.main{font-size:15px;gap:2px 6px}
  nav.main a{padding:8px}
  .foot-soc{font-size:.95rem}
  h1{font-size:1.65rem}
  h2{font-size:24px}
  h3{font-size:21px}
  h4{font-size:16px}
  .lede{font-size:17px}
  .tagline{font-size:1.05rem;margin-bottom:32px}
  /* фото обтекается текстом — как в вебе, но в одну колонку */
  .bio-row{display:block}
  .bio-row img{float:left;width:132px;margin:6px 16px 8px 0}
  .bio{font-size:1rem;text-align:left;min-width:0}
  .bio::after{content:"";display:block;clear:both}
  .logo img{width:64px;height:64px}
  .legal h1{font-size:23px}
  .legal h2{font-size:17px}
  .cover-row{grid-template-columns:1fr;gap:24px}
  .cover-row img{max-width:220px}
  main{padding:36px 0 52px}
  p{text-indent:1.4em}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}