@import url("/landing/vibe-approved/vibe-assessment-system/style.css");
@import url("/landing/vibe-approved/vibe-assessment-system/dialogue.css");

/* Revision 4: one business story, with the approved Electric visual language. */

.business-stage .dialogue-console {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
}
.business-stage .dialogue-header,
.business-stage .dialogue-composer {
  background: transparent;
  border: 0;
}
.business-stage .dialogue-log {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 18px;
}
.business-stage .dialogue-log[hidden] { display: none; }
.business-stage #dialogue-form {
  display: flex;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--raised);
}
.business-stage textarea {
  min-width: 0;
  flex: 1;
  resize: vertical;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  font-size: 17px;
}
.business-stage .ai-author { display: flex; align-items: center; gap: 8px; }
.business-stage .ai-author .assistant-mark { width: 26px; height: 26px; }
.business-stage .hero-actions { flex-wrap: wrap; }
.business-offer { text-align: center; margin: 20px auto; }
.business-offer a { display: inline-block; margin: 5px 0; }
.business-offer strong { font-size: clamp(32px, 4vw, 50px); }
#price .role-grid { margin: 20px 0; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.footer-socials a { margin: 0; text-decoration: underline; }

#quality, #experience { background: var(--surface); }
.quality-dialogue {
  display: grid;
  gap: 12px;
}
.quality-question {
  justify-self: end;
  background: var(--color-c);
  color: #20242b;
  padding: 18px 24px;
  border-radius: 18px 18px 4px 18px;
  font-weight: 700;
}
.quality-response {
  padding: 24px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
}
.quality-response ul, .ai-value-list { list-style: none; padding: 0; margin: 14px 0 0; }
.quality-response li, .ai-value-list li { border-top: 1px solid var(--line); padding: 14px 0; }
.quality-response li span { display: block; margin-top: 4px; color: var(--muted); }
.skill-story, .ai-video-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.skill-art { margin: 0; background: var(--wash-c); border-radius: 20px; overflow: hidden; }
.skill-art img { display: block; width: 100%; height: auto; }
.skill-copy h3, .ai-video-copy h2 { margin-bottom: 18px; }
.skill-copy p, .ai-video-copy p { color: var(--muted); }
.ai-video-player, #experience .film { margin: 0; }
.ai-video-player { width: min(100%, 320px); justify-self: center; }
.ai-video-player video, #experience video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border-radius: 18px;
}
.ai-video-player figcaption { margin-top: 12px; color: var(--muted); }
.text-action { display: inline-block; margin-top: 16px; color: var(--accent); }

.resource-section{padding-bottom:48px}
.resource-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:38px}
.resource-heading h2{font-size:44px;line-height:1.2}
.resource-heading>a{font-size:16px;line-height:1.55;color:var(--accent);max-width:210px;padding-bottom:6px}
.release-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.release-card{display:grid;grid-template-columns:165px 1fr;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;transition:background .2s,border-color .2s}
.release-card:hover{background:var(--raised);border-color:var(--accent)}
.release-art{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:23px 18px;min-height:300px;color:#20242b}
.release-september{background:var(--color-c)}
.release-august{background:var(--color-b)}
.release-art>span{display:block;font-size:17px;line-height:1.4;padding:12px;border-radius:13px 13px 2px 13px;background:#ffffffb8;max-width:145px;transform:rotate(-7deg)}
.release-art>b{font-size:42px;line-height:1.1;letter-spacing:-.055em;align-self:flex-end;transform:rotate(-7deg)}
.release-august>b{font-size:33px;transform:rotate(5deg)}
.release-copy{display:flex;flex-direction:column;align-items:flex-start;padding:25px 25px 23px}
.release-copy>span{font-size:13px;color:var(--muted);margin-bottom:12px}
.release-copy h3{font-size:24px;line-height:1.3;letter-spacing:-.035em}
.release-copy p{font-size:16px;line-height:1.65;margin:12px 0 22px}
.release-copy strong{font-size:15px;line-height:1.4;font-weight:500;text-decoration:underline;text-underline-offset:5px;margin-top:auto}
.webinar-poster{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;padding:36px 42px;border-radius:22px;background:var(--wash-a);margin-top:25px;text-decoration:none;border:1px solid var(--line)}
.webinar-poster:hover{border-color:var(--accent);background:var(--accent-soft)}
.webinar-label{font-size:14px;color:var(--muted);display:block;margin-bottom:12px}
.webinar-poster h3{font-size:37px;line-height:1.2;letter-spacing:-.04em}
.webinar-poster p{font-size:17px;line-height:1.65;margin:16px 0 22px;max-width:640px}
.webinar-poster strong{display:inline-block;font-size:16px;text-decoration:underline;text-underline-offset:5px}
.webinar-art{position:relative;align-self:center;max-width:390px;width:100%;justify-self:center;display:flex;flex-direction:column;gap:15px}
.webinar-art span{align-self:flex-start;display:block;padding:20px 27px;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.025em;color:#20242b;background:var(--color-c);border-radius:24px 24px 4px 24px;transform:rotate(-5deg)}
.webinar-art b{display:block;align-self:flex-end;padding:24px 30px;background:var(--color-b);color:#20242b;font-size:28px;line-height:1.2;letter-spacing:-.035em;border-radius:24px 24px 24px 4px;transform:rotate(4deg)}
.community-section{padding:40px 0 80px}
.community-panel{background:var(--surface);border:1px solid var(--line);border-radius:25px;overflow:hidden}
.community-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:38px 40px 0;align-items:center}
.community-heading h2{font-size:41px;line-height:1.2}
.community-heading p{font-size:17px;line-height:1.7}
.community-people{position:relative;isolation:isolate;margin-top:22px;height:auto;aspect-ratio:3/1;overflow:hidden}
.community-people img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.community-people svg{position:absolute;inset:0;width:100%;height:100%}
.community-channels{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:36px 40px 40px}
.community-channels h3{font-size:29px;line-height:1.25}
.community-channels p{font-size:17px;line-height:1.65;max-width:460px;margin:15px 0 23px}
.community-channels>.btn{font-size:16px}
.newsletter-line{display:flex;gap:10px}
.newsletter-line input{min-width:0;width:100%;flex:1;background:var(--raised);border:1px solid var(--line);padding:12px 15px;border-radius:8px;color:var(--ink);font-size:16px}
.newsletter-line button{white-space:nowrap;font-size:15px;padding:12px 16px}
.newsletter-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.6;color:var(--muted);margin-top:15px;max-width:500px}
.newsletter-consent input{flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}
.community-channels #newsletter-status{font-size:14px;line-height:1.5;margin:12px 0 0;color:var(--accent)}
.community-channels #newsletter-status[hidden]{display:none}

.webinar-poster,
.webinar-poster:hover {
  color: #fff;
  background: #294bb8;
  border-color: #7694f4;
}
.webinar-poster:hover { background: #24419f; }
.webinar-poster p { color: #fff; }
.webinar-poster strong {
  padding: 10px 16px;
  border-radius: 8px;
  color: #172b6f;
  background: #fff;
  text-decoration: none;
}
.event-formats {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  gap: 12px;
}
.event-formats span {
  padding: 12px 20px;
  border-radius: 12px;
  color: #20242b;
  background: var(--color-b);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
}
.event-formats span + span { background: var(--color-c); }

.hero-heading { max-width: 1120px; }
.hero h1 { max-width: 1000px; }
.hero-description { max-width: 880px; }
.business-stage { padding-bottom: 52px; }
.business-stage .person-prompt { min-height: 130px; }
.business-stage textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.section-heading { display: grid; grid-template-columns: 1.05fr 1fr; gap: 68px; align-items: end; margin-bottom: 40px; }
.section-heading p { font-size: 18px; line-height: 1.7; max-width: 580px; }
.business-problem { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(50px, 7vw, 110px); align-items: center; max-width: 1150px; }
.problem-copy h2 { max-width: 740px; }
.section-intro { margin-top: 24px; font-size: 18px; line-height: 1.7; }
.business-pains { margin-top: 26px; }
.business-pains>div { position: relative; border-top: 1px solid var(--line); padding: 19px 0 19px 20px; }
.business-pains>div:before { content: ''; position: absolute; left: 0; top: 26px; width: 5px; height: 22px; border-radius: 3px; background: var(--color-a); }
.business-pains>div:nth-child(2):before { background: var(--color-b); }
.business-pains>div:nth-child(3):before { background: var(--color-c); }
.business-pains dt { font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -.025em; }
.business-pains dd { margin: 8px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.problem-resolution { color: var(--ink); margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 18px; }
.ai-video-player { width: 100%; }
.ai-video-player video { aspect-ratio: 9/16; }
.ai-video-player figcaption { font-size: 14px; line-height: 1.6; text-align: center; max-width: 290px; margin-inline: auto; }
#kak { background: var(--page); padding-bottom: 70px; }
#kak .steps { margin-top: 0; }
.steps li { background: var(--surface); }
.workflow-note { margin-top: 28px; max-width: 910px; padding-left: 20px; border-left: 3px solid var(--color-b); font-size: 17px; }
#professii { background: var(--surface); }
#otchet { scroll-margin-top: 32px; align-items: start; gap: 65px; }
.report-aside { position: static; }
.report-aside>h3 { font-size: 28px; }
.report-aside>p { margin-top: 16px; }
.report-dialogue { margin-top: 30px; }
.report-dialogue>p { max-width: 380px; font-size: 23px; }
.report-dialogue>div { background: var(--page); }
.report-dialogue>div p { font-size: 17px; }
.other-roles { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 17px; max-width: 1050px; }
.assessment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.assessment-options article { display: flex; flex-direction: column; align-items: start; background: var(--wash-a); border: 1px solid var(--line); padding: 32px; border-radius: 20px; }
.assessment-options article:nth-child(2) { background: var(--wash-c); }
.format-duration { font-size: 16px; color: var(--accent); margin-bottom: 16px; }
.assessment-options h3 { font-size: 30px; }
.format-use { margin-top: 14px; max-width: 450px; font-size: 18px; min-height: 65px; }
.format-price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-top: 26px; color: var(--ink); font-size: 17px; }
.format-price strong { font-size: 48px; line-height: 1.2; letter-spacing: -.045em; }
.package-price { font-size: 17px; margin-top: 10px; }
.assessment-options .btn { margin-top: 24px; }
.price-explanation { margin-top: 26px; color: var(--ink); max-width: 950px; }
.price-terms { font-size: 16px; margin-top: 14px; max-width: 1040px; }
.release-pair { margin-top: 0; }
.release-card { padding: 0; }
.community-heading p { margin: 0; max-width: none; }
.community-people { margin-bottom: 0; }
.community-panel { padding-inline: 0; }
.community-channels form { margin: 0; }
.event-formats { display: flex; }
.report-aside .role-tabs { margin-top: 24px; }
#preview-form [role=status][hidden] { display: none; }

@media (max-width: 1150px) {
 .section-heading { gap: 36px; }
 .business-problem { grid-template-columns: minmax(0,1fr) 300px; gap: 45px; }
 .resource-heading h2 { font-size: 40px; }
 .release-card { grid-template-columns: 120px 1fr; }
 .release-art { padding: 20px 12px; }
 .release-art>b { font-size: 38px; }
 .release-august>b { font-size: 29px; }
 .release-art>span { font-size: 15px; }
 .release-copy { padding: 22px; }
 .release-copy h3 { font-size: 22px; }
 .community-heading,.community-channels { gap: 40px; padding-inline: 30px; }
 .community-heading h2 { font-size: 36px; }
 .webinar-poster { gap: 30px; padding: 32px; }
}
@media (max-width: 900px) {
 .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
 .section-heading p { max-width: 730px; }
 .business-problem { grid-template-columns: minmax(0,1fr) 265px; gap: 28px; align-items: start; }
 .business-problem h2 { font-size: 35px; }
 .business-pains dt { font-size: 20px; }
 .section-intro,.problem-resolution { font-size: 17px; }
 .ai-video-player { position: sticky; top: 25px; }
 #otchet { gap: 30px; }
 .report-dialogue { max-width: 680px; }
 .assessment-options article { padding: 25px; }
 .format-use { min-height: 90px; }
 .release-pair { gap: 18px; }
 .release-card { grid-template-columns: 1fr; }
 .release-art { height: 150px; min-height: 0; flex-direction: row; align-items: center; padding: 20px 28px; }
 .release-art>b { align-self: center; font-size: 46px; }
 .release-august>b { font-size: 36px; }
 .release-art>span { font-size: 18px; }
 .release-copy { padding: 25px; }
 .release-copy h3 { font-size: 24px; }
 .webinar-poster { grid-template-columns: 1.2fr .8fr; gap: 25px; }
 .webinar-poster h3 { font-size: 33px; }
 .community-heading { grid-template-columns: 1fr; gap: 20px; padding: 30px 28px 0; }
 .community-heading h2 { font-size: 36px; }
 .community-heading p { max-width: 700px; }
 .community-channels { gap: 30px; padding: 28px; }
 .community-channels h3 { font-size: 27px; }
 .newsletter-line { flex-wrap: wrap; }
 .newsletter-line input { flex-basis: 100%; }
 .newsletter-line button { width: 100%; }
}
@media (max-width: 650px) {
 .ail-container,.footer-grid,.legal { width: calc(100% - 28px); }
 .hero-heading { padding-inline: 14px; }
 .business-stage { padding-bottom: 38px; }
 .business-stage .person-prompt { min-height: 125px; }
 .business-problem { grid-template-columns: 1fr; gap: 30px; }
 .business-problem h2 { font-size: 33px; }
 .business-pains dt { font-size: 21px; }
 .ai-video-player { width: min(100%,320px); position: static; }
 #kak { padding-bottom: 52px; }
 .section-heading h2 br { display: none; }
 .section-heading p { font-size: 17px; }
 .assessment-options { grid-template-columns: 1fr; gap: 18px; }
 .assessment-options article { padding: 25px 22px; }
 .format-use { min-height: 0; font-size: 17px; }
 .format-price { margin-top: 22px; }
 .format-price strong { font-size: 44px; }
 .price-explanation { font-size: 17px; }
 .price-terms { font-size: 16px; }
 .resource-section { padding-bottom: 25px; }
 .resource-heading { display: block; margin-bottom: 26px; }
 .resource-heading h2 { font-size: 33px; }
 .resource-heading>a { display: inline-block; max-width: none; margin-top: 18px; font-size: 15px; }
 .release-pair { grid-template-columns: 1fr; gap: 20px; }
 .release-card { border-radius: 17px; }
 .release-art { height: 165px; padding: 25px 30px; }
 .release-copy { padding: 23px; }
 .release-copy h3 { font-size: 25px; }
 .release-copy p { font-size: 17px; }
 .release-copy>span { font-size: 14px; }
 .webinar-poster { grid-template-columns: 1fr; padding: 26px 23px; gap: 28px; border-radius: 18px; margin-top: 20px; }
 .webinar-poster h3 { font-size: 32px; }
 .event-formats { justify-content: flex-start; }
 .community-section { padding: 26px 0 54px; }
 .community-panel { border-radius: 20px; }
 .community-heading { padding: 25px 20px 0; gap: 18px; }
 .community-heading h2 { font-size: 32px; }
 .community-heading p { font-size: 17px; }
 .community-people { margin-top: 20px; aspect-ratio: 2.1/1; }
 .community-people img,.community-people svg { width: 143%; left: -21.5%; max-width: none; }
 .community-channels { grid-template-columns: 1fr; gap: 28px; padding: 25px 20px 28px; }
 .community-channels>div+div { padding-top: 25px; border-top: 1px solid var(--line); }
 .community-channels h3 { font-size: 28px; }
 .community-channels p { font-size: 17px; margin-bottom: 20px; }
 .newsletter-line { flex-wrap: nowrap; }
 .newsletter-line input { flex-basis: 0; }
 .newsletter-line button { width: auto; padding: 12px; }
}
@media (max-width: 380px) {
 .newsletter-line { flex-wrap: wrap; }
 .newsletter-line input { flex-basis: 100%; }
 .newsletter-line button { width: 100%; }
}


/* Revision 5: clear controls and context placed next to the related action. */
.dialogue-response { position: relative; margin-top: 10px; }
.dialogue-response[hidden] { display: none; }
.business-stage .dialogue-response .dialogue-log { padding-top: 18px; }
.business-stage .dialogue-response .ai-line { margin-top: 0; }
.business-stage .dialogue-response .ai-author { padding-right: 38px; min-height: 30px; }
.dialogue-close { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.dialogue-close svg { width: 20px; height: 20px; }
.dialogue-close:hover { color: var(--accent); border-color: var(--accent); }
.dialogue-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#professii .section-heading, #price .section-heading { display: block; }
.report-aside .role-hint { margin-top: 28px; font-size: 16px; line-height: 1.55; max-width: 430px; color: var(--muted); }
.report-aside .role-tabs { margin-top: 12px; }
#kak a, .other-roles a, #voprosy .a a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.event-calendar { justify-self: center; width: min(100%,285px); transform: rotate(-5deg); }
.event-calendar svg { display: block; width: 100%; height: auto; }
.webinar-poster { grid-template-columns: minmax(0,1fr) 290px; gap: 40px; }
.webinar-poster strong { text-decoration: none; }
.release-card .release-generic { background: var(--color-c); }
.release-card:nth-child(even) .release-generic { background: var(--color-b); }
.release-generic>b { font-size: 62px; }
@media(max-width:900px) {
 .webinar-poster { grid-template-columns: minmax(0,1fr) 200px; gap: 22px; }
}
@media(max-width:650px) {
 .webinar-poster { grid-template-columns: 1fr; gap: 20px; }
 .event-calendar { width: 155px; justify-self: end; margin-top: -8px; }
 .dialogue-close { width: 40px; height: 40px; }
}