/* sections.css — kimena.ai Concept A · sections below the hero
   Built strictly on base.css tokens & components. No token redefinition. */

/* ---------------------------------------------------------------- shared */

.sec{position:relative;padding:var(--section) 0}
.sec.tight{padding:calc(var(--section) * .72) 0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter)}

.sec-head{max-width:64ch}
.sec-head .eyebrow{display:block;margin-bottom:var(--s5)}
.sec-head h2{max-width:22ch}
.sec .body{max-width:62ch;color:var(--dim);margin:var(--s5) 0 0}

.band-sunken{background:var(--sunken);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* scroll reveal — transform & opacity only */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:60ms}
.reveal.d2{transition-delay:120ms}
.reveal.d3{transition-delay:180ms}

/* media frame — reuses .cropwrap/.cm from base.css for crop marks */
.frame{position:relative;border-radius:var(--r5);overflow:hidden;box-shadow:var(--sh-frame);background:var(--screen)}
.frame img,.frame video{display:block;width:100%;height:auto}
.frame.r4{border-radius:var(--r4)}

/* specimen caption strip */
.specimen{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);letter-spacing:0}
.specimen.right{justify-content:flex-end}
.specimen .sep{width:3px;height:3px;border-radius:50%;background:var(--line3)}

/* ---------------------------------------------------------------- 01 instrument */

.instrument .shot{padding:0 var(--gutter)}
.instrument .shot .frame{margin:0 auto;max-width:100%}
.instrument .specimen{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--gutter)}

/* ---------------------------------------------------------------- 02 pillars */

.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s9)}
.pillar{padding:0 var(--s7);position:relative}
.pillar:first-child{padding-left:0}
.pillar:last-child{padding-right:0}
.pillar + .pillar{border-left:1px solid var(--line)}
.pillar .idx{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.04em;margin-bottom:var(--s5)}
.pillar h3{margin-bottom:var(--s3)}
.pillar p{margin:0;color:var(--dim);font-size:var(--fs-body);line-height:1.6;max-width:34ch}

/* ---------------------------------------------------------------- 03 features */

.features-head{margin-bottom:var(--s9)}

.feature-row{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s9);align-items:center}
.feature-row + .feature-row{margin-top:calc(var(--section) * .8)}
.feature-row.flip{grid-template-columns:.85fr 1.15fr}
.feature-row.flip .feature-media{order:2}
.feature-row.flip .feature-copy{order:1}

.feature-media .frame{background:var(--panel)}
.feature-copy h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;margin-bottom:var(--s4)}
.feature-copy p{margin:0;color:var(--dim);max-width:42ch;line-height:1.6}
.feature-copy .mono-label{margin-top:var(--s5);font-family:var(--font-mono);
  font-size:var(--fs-meta);color:var(--faint);letter-spacing:.02em}

/* 4-up loop tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s9)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r4);
  overflow:hidden;box-shadow:var(--sh-1)}
.tile .tile-media{position:relative;aspect-ratio:4/3;background:var(--screen);overflow:hidden}
.tile .tile-media video{width:100%;height:100%;object-fit:cover;opacity:.92}
.tile .tile-label{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);letter-spacing:.02em}
.tile .tile-label .k{width:5px;height:5px;border-radius:50%;background:var(--line3)}

/* ---------------------------------------------------------------- 04 workflow */

.flow{position:relative;margin-top:var(--s9);padding-top:var(--s7)}
.flow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.flow .ticks{position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none}
.flow .ticks i{position:absolute;top:0;width:1px;height:6px;background:var(--line3)}
.flow .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.step{position:relative}
.step::before{content:"";position:absolute;left:0;top:-1px;width:1px;height:14px;background:var(--line3)}
.step .num{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.04em;margin-bottom:var(--s4)}
.step h3{margin-bottom:var(--s3)}
.step p{margin:0;color:var(--dim);font-size:var(--fs-body);line-height:1.6;max-width:30ch}

/* ---------------------------------------------------------------- 05 your ai */

.ai .sec-head{max-width:56ch}
.ai-panel{margin-top:var(--s9)}
.ai-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.ai-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r4);
  padding:var(--s7) var(--s6);box-shadow:var(--sh-1)}
.ai-cell .tag{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.03em;margin-bottom:var(--s5)}
.ai-cell h3{margin-bottom:var(--s3)}
.ai-cell p{margin:0;color:var(--dim);line-height:1.6;max-width:40ch}
.ai-or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 12px;border-radius:var(--pill);
  background:var(--panel3);border:1px solid var(--line2);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--dim);letter-spacing:.02em}
.ai-foot{margin-top:var(--s6);font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.02em}

/* ---------------------------------------------------------------- 06 invite */

.invite{position:relative;overflow:hidden}
.invite-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.invite-bg img{width:100%;height:100%;object-fit:cover;opacity:.14;transform:scale(1)}
.invite-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,rgba(10,10,12,0) 0%,rgba(10,10,12,.65) 55%,var(--bg) 100%)}
.invite .wrap{position:relative;z-index:1}

.invite-inner{max-width:560px;margin:0 auto;text-align:center}
.invite-inner .eyebrow{display:block;margin-bottom:var(--s5)}
.invite-inner h2{margin:0 auto}
.invite-inner h2 .care{color:var(--gold)}
.invite-inner .body{margin:var(--s5) auto 0;max-width:46ch}

.invite-form{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s7);text-align:left}
.invite-form label{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.02em;margin-bottom:var(--s2)}
.invite-form input{width:100%;height:44px;padding:0 var(--s4);border-radius:var(--r3);
  background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  font:400 var(--fs-body)/1 var(--font-ui);letter-spacing:var(--tr-ui);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.invite-form input::placeholder{color:var(--faint)}
.invite-form input:focus{outline:0;border-color:var(--acc-line);box-shadow:var(--focus)}
.invite-form .btn.primary{height:44px;justify-content:center;margin-top:var(--s2)}

.invite-band{margin-top:var(--s7);display:flex;align-items:center;justify-content:center;gap:var(--s3);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);letter-spacing:.02em}
.invite-band .sep{width:3px;height:3px;border-radius:50%;background:var(--line3)}
.invite-credit{margin-top:var(--s6);font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.02em;text-align:right}

/* ---------------------------------------------------------------- footer */

.foot{background:var(--sunken);border-top:1px solid var(--line);padding:var(--s9) 0 var(--s7)}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.foot-brand .wm{font-size:20px}
.foot-brand .tagline{margin-top:var(--s3);color:var(--dim);font-size:var(--fs-body);max-width:36ch}
.foot-nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.foot-nav a{font-size:var(--fs-ui);color:var(--dim);letter-spacing:var(--tr-ui);
  transition:color 0ms}
.foot-nav a:hover{color:var(--text)}
.foot-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.foot-bottom .mono-line{font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.02em}

/* ---------------------------------------------------------------- motion prefs */

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .reveal.in{opacity:1;transform:none}
  .invite-bg img{transform:scale(1);animation:none}
  .tile .tile-media video,
  .feature-media video{animation:none}
  *,*::before,*::after{transition-duration:0ms !important;animation-duration:0ms !important;animation-iteration-count:1 !important}
}

/* ---------------------------------------------------------------- responsive */

@media (max-width:1060px){
  .features-head{margin-bottom:var(--s8)}
  .feature-row{gap:var(--s7)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .pillar{padding:0 var(--s5)}
}

@media (max-width:900px){
  .feature-row{grid-template-columns:1fr;gap:var(--s6)}
  .feature-row.flip{grid-template-columns:1fr}
  .feature-row.flip .feature-media{order:0}
  .feature-row.flip .feature-copy{order:1}
  .feature-copy p{max-width:56ch}
  .flow .steps{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s6)}
  .ai-grid{grid-template-columns:1fr;gap:var(--s5)}
  .ai-or{position:relative;left:auto;top:auto;transform:none;margin:-2px auto;display:flex;width:max-content}
}

@media (max-width:760px){
  .pillars{grid-template-columns:1fr;margin-top:var(--s7)}
  .pillar{padding:var(--s6) 0}
  .pillar:first-child{padding-top:0}
  .pillar:last-child{padding-bottom:0}
  .pillar + .pillar{border-left:0;border-top:1px solid var(--line)}
  .pillar p{max-width:52ch}

  .flow .steps{grid-template-columns:1fr;gap:var(--s7)}
  .flow .ticks{display:none}

  .tiles{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .invite-credit{text-align:left}
  .foot-top{flex-direction:column;gap:var(--s5)}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:480px){
  .tiles{grid-template-columns:1fr}
  .invite-band{flex-wrap:wrap;gap:var(--s2)}
  .foot-nav{gap:var(--s4)}
}