/* Content sections below the hero. The whole reference stylesheet is ported here so that
   later steps only add markup. Rules for sections not yet in index.html are unused until then. */

/* ---------- shared section pieces (reused by every step) ---------- */
/* tint band: section on the band background. Usage: <section class="sec tint"> */
.tint{background:var(--band)}
/* section header: h2 left, .lead right, navy rule below. Usage: <div class="head"><h2>..</h2><p class="lead">..</p></div> */
.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(24px,5vw,72px);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--ink)}
/* checklist: square 2px box with a CSS-drawn check. Usage: <ul class="checks"> (add .cols for two columns) */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
.checks li{position:relative;padding-left:34px;line-height:1.45;min-width:0}
.checks li::before{content:"";position:absolute;left:0;top:.1em;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:var(--r)}
.checks li::after{content:"";position:absolute;left:7px;top:.28em;width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* thesis */
.thesis{border-top:1px solid var(--line)}
.thesis .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.statement{grid-column:1/-1;font-weight:300;font-size:clamp(2.1rem,5.6vw,5rem);line-height:1.04;letter-spacing:-.045em;max-width:17ch}
.statement .hl{color:var(--accent);font-weight:400}
.thesis-body{grid-column:6/-1;display:grid;gap:18px;margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--ink);font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:60ch}
.thesis-body strong{color:var(--ink);font-weight:600}

/* streams */
.streams-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center}
.streams-grid .lead{margin-top:20px}
.sentence{margin-top:32px;font:300 clamp(1.25rem,2vw,1.6rem)/1.38 var(--f-display);letter-spacing:-.02em;max-width:34ch}
.sentence-2{color:var(--ink-2);margin-top:4px}
.orbit{position:relative;width:min(100%,520px);aspect-ratio:1/1.02;justify-self:center}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%}
.orbit-lines line{stroke:var(--ink);stroke-width:1;opacity:.4;vector-effect:non-scaling-stroke}
.core{position:absolute;left:50%;top:50%;width:clamp(112px,28%,150px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:var(--r);background:var(--ink);color:var(--paper);display:grid;place-items:center;text-align:center;padding:8px;font:600 clamp(13px,2.6vw,16px)/1.2 var(--f-display);letter-spacing:-.01em}
.node{position:absolute;transform:translate(-50%,-50%);max-width:46%;background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);padding:12px 18px;font:500 15px/1.25 var(--f-body);text-align:center}
.n1{left:27%;top:11%}.n2{left:76%;top:27%}.n3{left:24%;top:76%}.n4{left:73%;top:90%}

/* system tabs */
.sys{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);margin-top:44px;align-items:start}
.sys-tabs{display:grid}
.tab{text-align:left;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;font:500 clamp(1.15rem,1.7vw,1.45rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink-3);transition:color .25s,padding .35s cubic-bezier(.16,1,.3,1),border-color .25s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);padding-left:16px;border-bottom:2px solid var(--accent)}
.sys-panel{background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);padding:clamp(24px,4vw,52px);min-height:360px}
.sys-panel h3{font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;letter-spacing:-.03em;max-width:22ch;margin-bottom:28px}
/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.about-grid h2{margin-bottom:28px}
blockquote{margin:0;padding:0;font:300 clamp(1.9rem,3.8vw,3.2rem)/1.1 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
blockquote::before{content:"\00AB";color:var(--accent)}
blockquote::after{content:"\00BB";color:var(--accent)}
.about-copy{display:grid;gap:22px;padding-top:6px}
.about-copy p{color:var(--ink-2);max-width:56ch}

/* packages */
.pkg-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.pkg-tab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:left;padding:18px 22px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .25s,background-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.pkg-tab:hover{border-color:var(--ink);transform:translateY(-2px)}
.pt-name{font:600 clamp(1.05rem,1.6vw,1.3rem)/1.2 var(--f-display);letter-spacing:-.02em}
.pt-price{color:var(--ink-3);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pkg-tab[aria-selected="true"]{border-color:var(--ink);background:var(--band)}
.pkg-tab[aria-selected="true"] .pt-price{color:var(--ink)}
.pkg-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:12px;background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);overflow:hidden;min-height:560px}
.pp-left{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3.4vw,48px);background:var(--band);min-width:0}
.pp-left h3{font-weight:700;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.04em;line-height:1.04}
.pp-tag{color:var(--ink-2);max-width:34ch}
.pp-price{display:flex;align-items:baseline;gap:10px;font:300 clamp(3rem,5.4vw,4.6rem)/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-top:4px}
.pp-price .cur{font-size:.5em;color:var(--ink-3)}
.pp-metrics{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));gap:14px;margin:6px 0 0;padding-top:20px;border-top:1px solid var(--ink)}
.pp-metrics dt{font-size:13px;color:var(--ink-3);line-height:1.3;min-height:2.6em}
.pp-metrics dd{margin:6px 0 0;font:500 clamp(1.15rem,1.9vw,1.5rem)/1.15 var(--f-display);letter-spacing:-.02em}
.pp-buy{gap:14px;margin-top:auto;padding-top:10px;display:grid}
.pay-note{font-size:14px;color:var(--ink-3);line-height:1.45}
/* not in the reference: the long label ("Заказать «Профессионал»") overflowed the panel at 320-360px and 870-940px.
   It may now wrap; when it fits on one line it renders exactly as before (same 54px height, centred). */
.pp-buy .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:12px}
.pp-right{padding:clamp(24px,3.4vw,48px);min-width:0}
.pp-right h4{font-weight:600;font-size:1.05rem;color:var(--ink-3);margin-bottom:18px;letter-spacing:0}
.inherit{display:inline-block;border:1.5px solid var(--ink);border-radius:var(--r);padding:9px 16px;font-weight:500;font-size:15px;margin-bottom:24px}
.fine{font-size:14px;color:var(--ink-3);max-width:70ch;margin-top:18px}

/* results */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:40px}
.cell{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:210px;padding:clamp(22px,3vw,34px);border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.cell h3{position:relative;font-weight:500;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.18;letter-spacing:-.025em;max-width:20ch}
.b1{grid-column:span 7;min-height:320px;background:var(--band-2);border-color:transparent}
.b1 h3{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.04em}
.b2{grid-column:span 5}
.b3,.b4,.b5{grid-column:span 4}
.b4{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.b6{grid-column:span 12;min-height:230px;border-color:var(--ink);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(27,47,82,.07) 14px 15px),var(--surface)}
.b6 h3{max-width:30ch;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:600}

/* audience */
.aud-text{margin-top:36px;font:300 clamp(1.6rem,3.5vw,2.9rem)/1.28 var(--f-display);letter-spacing:-.035em;max-width:28em}
.p{background:linear-gradient(var(--band-2),var(--band-2)) 0 100%/100% .12em no-repeat;transition:background-size .4s cubic-bezier(.16,1,.3,1);font-weight:500}
.p:hover{background-size:100% 100%}

/* support */
.sup-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,72px)}
.sup-list li{padding:22px 0;border-bottom:1px solid var(--line);font:500 clamp(1.05rem,1.5vw,1.25rem)/1.3 var(--f-display);letter-spacing:-.015em}

/* final cta */
/* section padding the reference sets inline on the closing CTA section */
.sec-cta{padding-block:clamp(56px,8vw,104px)}
.cta{background:var(--band);border-top:1px solid var(--ink);padding:clamp(28px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:32px;align-items:end}
.cta-lines{display:grid;gap:6px;font:300 clamp(1.5rem,3.2vw,2.7rem)/1.14 var(--f-display);letter-spacing:-.035em}
.cta-lines span:last-child{color:var(--accent);font-weight:500}
.cta-lines span{text-wrap:balance}
.cta .btn{justify-self:end}

/* footer */
footer{padding-block:48px 56px;color:var(--ink-3);font-size:14px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px 56px}
footer strong{display:block;color:var(--ink);font:600 16px/1.3 var(--f-display);margin-bottom:6px}
footer p+p{margin-top:8px}
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;border-top:1px solid var(--line)}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.foot-legal a{color:var(--ink-2)}
/* footer links: 44px tall hit area without changing the look (negative margin cancels the padding) */
.foot-legal a,footer [data-contact-slot] a{display:inline-block;padding-block:11px;margin-block:-11px}
.ph{color:var(--ink-3);background:var(--band);padding:0 4px;border-radius:var(--r)}

/* legal pages (privacy.html, offer.html) */
/* smaller than the hero h1 so long words ("конфиденциальности") fit at 320px */
.legal h1{margin-bottom:28px;font-size:clamp(1.75rem,6vw,3.3rem);line-height:1.08;letter-spacing:-.035em;overflow-wrap:break-word}
.legal-todo{max-width:72ch;padding:20px 24px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--band);font:600 15px/1.45 var(--f-body);letter-spacing:.04em}
.legal-text{max-width:72ch;margin-top:40px;color:var(--ink-2)}
.legal-text h2{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:40px 0 14px}
.legal-text p+p,.legal-text ul,.legal-text ol{margin-top:14px}
.legal-text li+li{margin-top:6px}

/* responsive */
@media (max-width:860px){
  .head{grid-template-columns:minmax(0,1fr)}
  .thesis-body{grid-column:1/-1}
  .streams-grid,.about-grid{grid-template-columns:minmax(0,1fr)}
  .sys{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .sys-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .tab{flex:none;padding:12px 18px;border:1.5px solid var(--field);border-radius:var(--r);background:var(--surface);font-size:15px;color:var(--ink);white-space:nowrap}
  .tab[aria-selected="true"]{padding-left:18px;background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .checks.cols{grid-template-columns:minmax(0,1fr)}
  .pkg-tabs{grid-template-columns:minmax(0,1fr)}
  .pkg-panel{grid-template-columns:minmax(0,1fr);min-height:0}
  .b1,.b2{grid-column:span 12}
  .b3,.b4{grid-column:span 6}
  .b5{grid-column:span 12}
  .sup-list{grid-template-columns:minmax(0,1fr)}
  .cta{grid-template-columns:minmax(0,1fr)}
  .cta .btn{justify-self:start}
  footer .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .b3,.b4{grid-column:span 12}
  .pp-metrics{gap:10px}
}
@media (max-width:380px){
  /* not in the reference: under ~360px its diagram overlaps the core and "Экспертное сопровождение"
     spills out of its box. A taller box keeps the nodes clear of the core (the SVG lines use the same
     percentages, so they stay attached) and slimmer padding lets the longest word fit. */
  .orbit{aspect-ratio:1/1.3}
  .node{padding:10px}
}